/* tokens.css — All design tokens. The only file in src/neltik/ui/static
   that may contain hex colors, px values, or shadow definitions.

   Do not add tokens casually. A new token requires a real use case,
   not "this color almost matches".
*/

:root {
  /* ── Color: Surface ─────────────────────────────────────── */
  --bg:                          #f5f8fc;
  --surface:                     #ffffff;
  --surface-soft:                #f8fbff;
  --surface-inverted:            #08111f;
  --surface-elevated-inverted:   #101b2d;
  --app-bg:                      #0b1220;
  --app-bg-elevated:             #101b2d;
  --app-grid-line:               rgba(148, 163, 184, 0.12);
  --app-panel-line:              rgba(184, 198, 216, 0.18);

  /* ── Color: Text ────────────────────────────────────────── */
  --text:             #111827;
  --text-secondary:   #243247;
  --text-muted:       #64748b;
  --text-inverted:    #f8fbff;
  --text-inverted-muted: #9fb1c8;

  /* ── Color: Border ──────────────────────────────────────── */
  --border:          #d9e3ef;
  --border-subtle:   #e8eff7;
  --border-strong:   #b8c6d8;

  /* ── Color: Action (two-tier: soft default + loud accent) ─ */
  --action-primary-bg:        #ffffff;
  --action-primary-fg:        #111827;
  --action-primary-border:    #b8c6d8;
  --action-primary-bg-hover:  #f8fbff;

  --accent:               #2f6df6;
  --accent-hover:         #194dbf;
  --accent-soft:          #edf4ff;
  --accent-soft-border:   #b8d1ff;

  /* ── Color: Status ──────────────────────────────────────── */
  --success-bg:       #f0fdf4;
  --success-fg:       #15803d;
  --success-border:   #bbf7d0;
  --success-dot:      #22c55e;

  --warning-bg:       #fffbeb;
  --warning-bg-strong: #fef3c7;
  --warning-fg:       #b45309;
  --warning-border:   #fde68a;
  --warning-dot:      #f59e0b;

  --danger-bg:         #fef2f2;
  --danger-fg:         #b91c1c;
  --danger-fg-hover:   #991b1b;
  --danger-border:     #fecaca;
  --danger-dot:        #ef4444;

  /* ── Color: Sidebar (dark surface) ──────────────────────── */
  --sidebar-bg:           #08111f;
  --sidebar-text:         #dbeafe;
  --sidebar-text-muted:   #7f8ea3;
  --sidebar-divider:      rgba(184, 198, 216, 0.16);
  --sidebar-active-bg:    rgba(47, 109, 246, 0.18);
  --sidebar-active-text:  #dbeafe;
  --sidebar-hover-bg:     rgba(255, 255, 255, 0.07);

  /* ── Typography ─────────────────────────────────────────── */
  --font-family: "IBM Plex Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:   "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  13px;
  --text-md:    14px;
  --text-lg:    15px;
  --text-xl:    16px;
  --text-2xl:   18px;
  --text-3xl:   20px;
  --text-4xl:   24px;

  --leading-tight:    1.25;
  --leading-snug:     1.4;
  --leading-base:     1.5;
  --leading-relaxed:  1.6;

  /* ── Spacing (4px scale) ────────────────────────────────── */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;

  /* ── Radii ──────────────────────────────────────────────── */
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    8px;
  --radius-xl:    8px;
  --radius-full:  9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-xs:    0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-sm:    0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-md:    0 8px 18px rgba(17, 24, 39, 0.08), 0 2px 6px rgba(17, 24, 39, 0.05);
  --shadow-lg:    0 16px 36px rgba(17, 24, 39, 0.10), 0 6px 16px rgba(17, 24, 39, 0.08);
  --shadow-xl:    0 24px 70px rgba(17, 24, 39, 0.16);
  --shadow-focus: 0 0 0 3px rgba(47, 109, 246, 0.22);
  --shadow-focus-danger: 0 0 0 3px rgba(185, 28, 28, 0.18);

  /* ── Motion ─────────────────────────────────────────────── */
  --duration-fast:    100ms;
  --duration-base:    150ms;
  --duration-slow:    250ms;
  --ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Layout ─────────────────────────────────────────────── */
  --sidebar-width:  220px;
  --chat-width:     380px;
  --grid-size:      64px;
}