/* ══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — black-gray TailAdmin.

   Pure Tailwind `neutral` palette for surfaces + text + borders (no blue tint
   in the grays). TailAdmin primary #3C50E0 retained as the single accent for
   buttons, links, focus rings. Typography: Satoshi. See .impeccable.md.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Typography ────────────────────────────────────────────── */
  --font-sans:  'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Satoshi', 'Inter', 'Cambria', Georgia, serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --fs-xs:  13px;    /* micro-labels, badges */
  --fs-sm:  14px;    /* tables, dense rows, chips */
  --fs-md:  16px;    /* body (default) */
  --fs-lg:  20px;    /* section titles */
  --fs-xl:  26px;    /* view h1 */
  --fs-2xl: 34px;    /* hero metrics */

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  --lh-tight:  1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.625;

  --tracking-tight: -0.01em;
  --tracking-label:  0.06em;

  /* ── Color — pure neutral grayscale ────────────────────────── */
  /* Surfaces — Tailwind neutral-950 → neutral-800 range */
  --bg:             #0A0A0A;    /* neutral-950 — body */
  --bg-sunken:      #050505;    /* deeper — input fills */
  --surface:        #171717;    /* neutral-900 — cards, sidebar, header */
  --surface-raised: #262626;    /* neutral-800 — sidebar active, hover */
  --surface-hover:  #1F1F1F;    /* between 900 and 800 */

  /* Borders */
  --line:        #262626;       /* neutral-800 */
  --line-strong: #404040;       /* neutral-700 */

  /* Text — pure grayscale, no blue tint */
  --ink:         #FAFAFA;       /* neutral-50 — headings, active */
  --ink-dim:     #D4D4D4;       /* neutral-300 — body */
  --ink-faint:   #A3A3A3;       /* neutral-400 — captions */
  --ink-inverse: #0A0A0A;       /* text on accent fill */

  /* Accent — TailAdmin primary, used sparingly for actions only */
  --accent:        #3C50E0;
  --accent-strong: #3344CC;
  --accent-soft:   rgba(60, 80, 224, 0.15);
  --accent-mark:   #3C50E0;

  /* Signals — TailAdmin meta-* tokens */
  --signal-loss:     #FB5454;
  --signal-loss-bg:  rgba(251, 84, 84, 0.12);
  --signal-gain:     #10B981;
  --signal-gain-bg:  rgba(16, 185, 129, 0.12);
  --signal-info:     #259AE6;
  --signal-info-bg:  rgba(37, 154, 230, 0.12);
  --signal-warn:     #FFA70B;
  --signal-warn-bg:  rgba(255, 167, 11, 0.12);

  /* ── Spacing ───────────────────────────────────────────────── */
  --space-2xs:  4px;
  --space-xs:   8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ── Radius ────────────────────────────────────────────────── */
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-xl:  12px;
  --r-pill: 999px;

  /* ── Shadows — very soft against near-black ────────────────── */
  --shadow-sm: 0px 1px 3px rgba(0, 0, 0, 0.4),
               0px 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0px 8px 13px -3px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0px 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-overlay: 0px 15px 30px rgba(0, 0, 0, 0.55),
                    0 0 0 1px rgba(255, 255, 255, 0.05);

  /* ── Motion ─────────────────────────────────────────────────── */
  --dur-instant: 80ms;
  --dur-fast:    150ms;
  --dur-base:    200ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Layout ─────────────────────────────────────────────────── */
  --sidebar-w:  290px;
  --infopane-w: 300px;
  --topbar-h:   80px;
}