/* ECHO design tokens — the single source of truth.
 * ------------------------------------------------------------------
 * These are the ONLY colours, radii, type roles and text brightnesses
 * ECHO ships. The values mirror ECHO Design System.html exactly.
 * Anything a screen uses that is NOT declared here is drift, and
 * echo-lint.mjs will fail the build on it.
 *
 * The @echo-* directives below are machine-readable: echo-lint.mjs
 * reads this file to learn the allowed palette/scale, so the tokens
 * and the enforcer can never disagree. Edit values here and the
 * linter updates automatically. Do not hand-edit the linter's lists.
 *
 * Portable twin: design-tokens.json  ·  Spec: DESIGN.md
 * Preview:       design-preview.html
 * ------------------------------------------------------------------ */

/* @echo-signal:  #ef4444, #ffb929, #16a34a, #6a5ed9, #a79ef2, #3f71d4 */
/* @echo-text:    #fafafa, #a1a1aa, #d4d4d8, #ffffff, #09090b */
/* @echo-text-dim: #71717a, #52525b */
/* @echo-radius:  1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 999 */
/* 1/2/4/5 = micro radii (carets, bars, kbd keys); 9 nav/chip, 10 btn,
 * 11 tile, 12 well, 14 card, 999 pill. 13 and 16 are NOT on the scale. */

:root {
  /* ── motion ─────────────────────────────────────────────────── */
  --motion-ease:         cubic-bezier(0.22, 1, 0.36, 1); /* entrance / rise */
  --motion-ease-state:   cubic-bezier(0.4, 0, 0.2, 1);   /* hover / state */
  --motion-entrance:     550ms;
  --motion-state:        200ms;
  --motion-micro:        120ms;

  /* ── neutral ramp — the resting palette ─────────────────────── */
  --background:          #09090b;   /* app canvas · oklch(0.13 0.005 286) */
  --sidebar:             #0b0b0e;   /* sidebar · oklch(0.14 0.005 286) */
  --surface-sunk:        #0f0f12;   /* wells behind maps/charts */
  --card:                #161619;   /* card / popover */
  --card-inset:          #131316;   /* inset tile inside a card */
  --muted:               #1c1c20;   /* wells, input fills */
  --secondary:           #232327;   /* hover surface */
  --accent:              #26262b;   /* stronger hover */
  --divider-strong:      #3f3f46;   /* strong dividers / disabled fills */
  --border:              rgba(255, 255, 255, 0.09);  /* hairlines */
  --border-row:          rgba(255, 255, 255, 0.055); /* list-row dividers */

  /* ── text — two-level body + named companions ── */
  --foreground:          #fafafa;   /* text · level 1 */
  --muted-foreground:    #a1a1aa;   /* text · level 2 */
  --foreground-bright:   #d4d4d8;   /* bright icon / hover / nav chrome — not a 3rd body tier */
  /* ── primary CTA (monochrome frost) — same ink as L1, named for actions ── */
  --primary:             #fafafa;   /* primary action fill */
  --primary-foreground:  #09090b;   /* text on primary fill */

  /* rest switches — mono meta / faintest (not body copy) */
  --dim:                 #71717a;
  --dim-2:               #52525b;

  /* ── signal colours — only where they carry meaning ─────────── */
  --critical:            #ef4444;   /* Crimson · critical tier */
  --critical-tint:       rgba(239, 68, 68, 0.12);
  --critical-line:       rgba(239, 68, 68, 0.34);
  --elevated:            #ffb929;   /* Saffron · elevated tier */
  --elevated-tint:       rgba(255, 185, 41, 0.12);
  --elevated-line:       rgba(255, 185, 41, 0.26);
  --guarded:             #16a34a;   /* Emerald · guarded / live */
  --guarded-tint:        rgba(22, 163, 74, 0.12);
  --guarded-line:        rgba(22, 163, 74, 0.28);

  /* ── brand thread — active / selected only, never decoration ── */
  --brand:               #6a5ed9;   /* Iris · active / selected · fills & rings ONLY */
  --brand-foreground:    #a79ef2;   /* Iris text on dark */
  --brand-tint:          rgba(106, 94, 217, 0.14);
  --brand-line:          rgba(106, 94, 217, 0.32);
  --ring:                #6a5ed9;   /* focus ring */

  /* ── shadcn bridge — aliases only; no second palette (uploads/globals.css) ──
   * Components expect *-foreground / popover / destructive / input / charts /
   * sidebar-*. Point them at ECHO tokens so Button/Card/Sidebar don't invent hues. */
  --popover:                   var(--card);
  --card-foreground:           var(--foreground);
  --popover-foreground:        var(--foreground);
  --secondary-foreground:      var(--foreground);
  --accent-foreground:         var(--foreground);
  --destructive:               var(--critical);   /* urgent CTA ≡ critical */
  --input:                     rgba(255, 255, 255, 0.14);
  --chart-1:                   #fafafa;           /* mono series · zinc-50 */
  --chart-2:                   #71717a;           /* zinc-500 */
  --chart-3:                   #a1a1aa;           /* zinc-400 */
  --chart-4:                   #52525b;           /* zinc-600 */
  --chart-5:                   #3f3f46;           /* zinc-700 */
  --sidebar-foreground:        var(--foreground-bright); /* nav chrome — not body L1/L2 */
  --sidebar-primary:           var(--brand);      /* active nav = Iris */
  --sidebar-primary-foreground:#ffffff;
  --sidebar-accent:            var(--muted);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border:            rgba(255, 255, 255, 0.07);
  --sidebar-ring:              var(--ring);
  --info:                      #3f71d4;           /* optional; not a threat tier */
  --radius:                    0.65rem;           /* shadcn radius root */

  /* ── radius scale — one system ──────────────────────────────── */
  --r-micro:             4px;       /* carets, bars, kbd */
  --r-chip:              9px;       /* nav items, chips */
  --r-btn:               10px;      /* buttons */
  --r-tile:              11px;      /* inset tiles */
  --r-well:              12px;      /* wells / grouped panels */
  --r-card:              14px;      /* cards / popovers */
  --r-badge:             999px;     /* pills / dots */

  /* ── spacing scale — 4px base ───────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;

  /* ── typography ─────────────────────────────────────────────── */
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --text-display: 28px;
  --text-h1:      16px;
  --text-body:    13.5px;
  --text-meta:    11.5px;
  --text-mono:    15px;
  --text-label:   10px;   /* caps labels · letter-spacing ~0.18em */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ── layout chrome ──────────────────────────────────────────── */
  --sidebar-width: 236px;
  --header-height: 60px;
  --content-max:   1360px;
}