/* ==========================================================================
   Grid Software Design System — Tokens
   Single source of truth. No hex values anywhere else in the codebase.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Spacing (4pt scale) --------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* --- Type ------------------------------------------------------------- */
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Space Grotesk", var(--font-ui);
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --fs-display: clamp(38px, 5.4vw, 62px);
  --fs-h1: clamp(28px, 3vw, 34px);
  --fs-h2: clamp(22px, 2.2vw, 27px);
  --fs-h3: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;
  --fs-micro: 11px;

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  --tr-tight: -0.022em;
  --tr-wide: 0.08em;

  /* --- Surfaces (neutral, not blue-navy) -------------------------------- */
  --bg: #0a0b0d;
  --bg-elev: #0d0e11;
  --surface-1: #111216;
  --surface-2: #16181d;
  --surface-3: #1d2027;
  --surface-inset: #0c0d10;

  --line-1: #23262e;
  --line-2: #2f333c;
  --line-3: #3d424e;

  /* --- Text ------------------------------------------------------------- */
  --text: #f4f6f8;
  --text-2: #a9b0bd;
  --text-3: #767e8c;

  /* --- Accent + semantic ------------------------------------------------ */
  --accent: #3b82f6;
  --accent-hi: #6aa5f9;
  --accent-lo: #1d4ed8;
  --accent-soft: rgba(59, 130, 246, 0.12);
  --accent-line: rgba(59, 130, 246, 0.32);

  --ok: #3fcf8e;
  --ok-soft: rgba(63, 207, 142, 0.12);
  --warn: #f5a524;
  --warn-soft: rgba(245, 165, 36, 0.12);
  --err: #f4585c;
  --err-soft: rgba(244, 88, 92, 0.12);
  --info: #6aa5f9;
  --info-soft: rgba(106, 165, 249, 0.12);

  /* --- Elevation (borders first) ---------------------------------------- */
  --e1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --e2: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --e3: 0 24px 64px -16px rgba(0, 0, 0, 0.75);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* --- Radius ----------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* --- Motion ----------------------------------------------------------- */
  --t-fast: 120ms cubic-bezier(0.2, 0, 0, 1);
  --t-base: 180ms cubic-bezier(0.2, 0, 0, 1);
  --t-slow: 260ms cubic-bezier(0.2, 0, 0, 1);

  /* --- Layout ----------------------------------------------------------- */
  --shell-max: 1180px;
  --app-max: 1560px;

  /* Height of the global alert banner (matches components.css .global-alert     */
  /* min-height 40px + padding-block sp-2*2 + 1px border). 0 by default so       */
  /* every layout calc that references it is a no-op when no alert is showing.   */
  /* Flipped to the real value on body.has-alert below.                          */
  --alert-h: 0px;
  --prose-max: 68ch;
  --nav-h: 64px;
  --sidebar-w: 250px;
  --sidebar-rail: 68px;

  /* --- Legacy back-compat (do not use in new code) ---------------------- */
  --bg0: var(--bg);
  --bg1: var(--bg-elev);
  --surface: var(--surface-1);
  --panel: var(--surface-1);
  --panel-2: var(--surface-2);
  --border: var(--line-1);
  --border-1: var(--line-1);
  --border-2: var(--line-2);
  --muted: var(--text-2);
  --accent-2: var(--accent-hi);
  --kicker: var(--accent-hi);
  --ring: var(--focus);
  --danger: var(--err);
  --success: var(--ok);
  --warning: var(--warn);
  --radius-lg: var(--r-lg);
  --radius-md: var(--r-md);
  --radius-sm: var(--r-sm);
  --radius-xs: var(--r-xs);
  --radius-pill: var(--r-pill);
  --shadow-1: var(--e1);
  --shadow-2: var(--e2);
  --transition-smooth: var(--t-base);

  /* Glass is now used on exactly two surfaces: sticky nav + modals. */
  --glass-bg: rgba(10, 11, 13, 0.72);
  --glass-border: var(--line-1);
  --glass-blur: 16px;
  --glass-shadow: var(--e2);

  --ga-info-bg: var(--info);
  --ga-warning-bg: var(--warn);
  --ga-danger-bg: var(--err);
  --ga-success-bg: var(--ok);
}