/* ═══════════════════════════════════════════════════════════════════
   ORBIT DESIGN SYSTEM — CANONICAL TOKEN FILE
   Locked by ADR-022. Every surface loads this before any other CSS.

   Tier 1 — Structural tokens (universal, all surfaces identical)
   Tier 2 — Surface accent (per-surface :root override)
   Compat  — Backward aliases so pre-Phase-36 code keeps working
═══════════════════════════════════════════════════════════════════ */
:root {

  /* ═══════════════════════════════════════════════════════════════
     TIER 1 — STRUCTURAL TOKENS
  ═══════════════════════════════════════════════════════════════ */

  /* ── Spacing (4px base unit, no fractional values) ────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Typography ────────────────────────────────────────────────── */
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --font-sans: 'Montserrat', 'Inter', system-ui, sans-serif;
  --text-h1:     24px;
  --text-h2:     18px;
  --text-h3:     14px;
  --text-body:   13px;
  --text-data:   12px;
  --text-label:  11px;
  --text-tight:   1.2;
  --text-normal:  1.45;
  --text-loose:   1.6;
  --letter-caps: 0.18em;

  /* ── Structural Color ──────────────────────────────────────────── */
  --surface-0: #070707;
  --surface-1: #0d0d0d;
  --surface-2: #141414;
  --surface-3: #1e1e1e;
  --border-glass:        rgba(255, 255, 255, 0.07);
  --border-glass-strong: rgba(255, 255, 255, 0.14);
  --text-primary:   #ffffff;
  --text-secondary: #8a8a8a;
  --text-mono:      #b4cad6;

  /* ── Status Color (semantic, fleet-wide — never use for surface identity) */
  --status-warn:     #ffb800;
  --status-error:    #ff3b30;
  --status-ok:       #32d74b;
  --status-info:     #8a8a8a;
  --status-warn-rgb:  255, 184, 0;
  --status-error-rgb: 255, 59, 48;
  --status-ok-rgb:    50, 215, 75;

  /* ── Glass Treatment ───────────────────────────────────────────── */
  --glass-blur:   12px;
  --glass-radius: 12px;
  --glass-bg:     rgba(255, 255, 255, 0.02);
  --glass-shadow: 0 0 24px rgba(0, 212, 255, 0.06);

  /* ── Animation ─────────────────────────────────────────────────── */
  --anim-micro:  150ms;
  --anim-panel:  250ms;
  --anim-page:   300ms;
  --anim-easing: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Border Radius ─────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  /* ═══════════════════════════════════════════════════════════════
     TIER 2 — SURFACE ACCENT (default = ORBIT blue)
     Each surface declares these three vars in its own :root block.
     Components consume var(--surface-accent), never raw hex.
  ═══════════════════════════════════════════════════════════════ */
  --surface-accent:      #00d4ff;
  --surface-accent-soft: rgba(0, 212, 255, 0.18);
  --surface-accent-rgb:  0, 212, 255;
  --surface-accent-glow: 0 0 20px rgba(0, 212, 255, 0.4);

  /* ═══════════════════════════════════════════════════════════════
     BACKWARD COMPATIBILITY ALIASES
     Pre-Phase-36 component code uses these names — they still work.
     New code (Phase 36+) uses the canonical names above.
  ═══════════════════════════════════════════════════════════════ */

  /* Void / structural surface */
  --void:   var(--surface-0);
  --void-2: var(--surface-1);
  --void-3: var(--surface-2);
  --void-4: var(--surface-3);
  --void-50:  #070707;
  --void-100: #0d0d0d;
  --void-200: #141414;
  --void-300: #1e1e1e;

  /* Font aliases */
  --font-ui:   var(--font-sans);
  --font-data: var(--font-mono);

  /* Type scale aliases */
  --text-2xs:  7px;
  --text-xs:   8px;
  --text-sm:   9px;
  --text-base: 10px;
  --text-md:   var(--text-label);   /* 11px */
  --text-lg:   var(--text-body);    /* 13px */
  --text-xl:   16px;
  --text-2xl:  var(--text-h2);      /* 18px */
  --text-3xl:  var(--text-h1);      /* 24px */

  /* Panel / glass surface aliases */
  --surface-bg:          var(--surface-0);
  --surface-panel:       var(--glass-bg);
  --surface-panel-hover: rgba(255, 255, 255, 0.045);
  --surface-panel-blur:  blur(var(--glass-blur));
  --surface-overlay:     rgba(9, 9, 15, 0.94);
  --surface-bar:         rgba(5, 5, 8, 0.92);
  --surface-node:        var(--surface-2);
  --panel-bg:            var(--glass-bg);
  --panel-bg-hover:      rgba(255, 255, 255, 0.045);
  --panel-border:        var(--border-glass);
  --panel-blur:          blur(var(--glass-blur));
  --border-panel:        var(--border-glass);
  --border-strong:       var(--border-glass-strong);

  /* Text hierarchy aliases */
  --text-dim:   #475569;
  --text-muted: #2d3748;

  /* Primitive raw color values (used by fills/glows below) */
  --cyan-500:        #00d4ff;
  --cyan-500-rgb:    0, 212, 255;
  --purple-500:      #8b5cf6;
  --purple-500-rgb:  139, 92, 246;
  --amber-500:       #f59e0b;
  --amber-500-rgb:   245, 158, 11;
  --crimson-500:     #ef4444;
  --crimson-500-rgb: 239, 68, 68;
  --emerald-500:     #10b981;
  --emerald-500-rgb: 16, 185, 129;
  --pink-500:        #ec4899;
  --pink-500-rgb:    236, 72, 153;
  --slate-100:       #f1f5f9;
  --slate-400:       #94a3b8;
  --slate-600:       #475569;
  --slate-800:       #2d3748;

  /* Semantic status aliases (legacy names) */
  --status-active:      var(--cyan-500);
  --status-active-rgb:  var(--cyan-500-rgb);
  --status-accent:      var(--purple-500);
  --status-accent-rgb:  var(--purple-500-rgb);
  --status-gate:        var(--status-warn);
  --status-gate-rgb:    var(--status-warn-rgb);
  --status-success:     var(--status-ok);
  --status-success-rgb: var(--status-ok-rgb);
  --status-idle:        var(--status-info);

  /* Low-opacity fill aliases */
  --fill-active:  rgba(0, 212, 255, 0.18);
  --fill-accent:  rgba(139, 92, 246, 0.18);
  --fill-gate:    rgba(245, 158, 11, 0.18);
  --fill-error:   rgba(239, 68, 68, 0.18);
  --fill-success: rgba(16, 185, 129, 0.18);
  --fill-voice:   rgba(236, 72, 153, 0.18);
  --fill-idle:    rgba(71, 85, 105, 0.18);

  /* Glow aliases */
  --glow-active:  0 0 24px rgba(0, 212, 255, 0.45), 0 0 48px rgba(0, 212, 255, 0.2);
  --glow-accent:  0 0 24px rgba(139, 92, 246, 0.45), 0 0 48px rgba(139, 92, 246, 0.2);
  --glow-gate:    0 0 24px rgba(245, 158, 11, 0.45);
  --glow-error:   0 0 12px rgba(239, 68, 68, 0.2);
  --glow-success: 0 0 20px rgba(16, 185, 129, 0.4);
  --glow-voice:   0 0 20px rgba(236, 72, 153, 0.35);

  /* Legacy named color aliases */
  --cyan:         var(--cyan-500);
  --cyan-soft:    var(--fill-active);
  --cyan-glow:    var(--glow-active);
  --cyan-pulse:   rgba(0, 212, 255, 0.6);
  --purple:       var(--purple-500);
  --purple-soft:  var(--fill-accent);
  --purple-glow:  var(--glow-accent);
  --amber:        var(--amber-500);
  --amber-soft:   var(--fill-gate);
  --amber-glow:   var(--glow-gate);
  --crimson:      var(--crimson-500);
  --crimson-soft: var(--fill-error);
  --emerald:      var(--emerald-500);
  --emerald-soft: var(--fill-success);
  --emerald-glow: var(--glow-success);
  --pink:         var(--pink-500);
  --pink-soft:    var(--fill-voice);

  /* Z-index scale */
  --z-base:    1;
  --z-panel:   10;
  --z-bar:     100;
  --z-overlay: 200;
  --z-modal:   300;

  /* Layout constants */
  --bar-h:      44px;
  --layout-gap: 12px;
  --layout-pad: 12px;

  /* Duration aliases (old unit-based names still work) */
  --dur-fast:  var(--anim-micro);   /* 150ms */
  --dur-base:  var(--anim-panel);   /* 250ms (was 200ms — intentional harmonization) */
  --dur-slow:  var(--anim-page);    /* 300ms */
  --dur-xslow: 400ms;               /* no new-name equivalent; kept for hold animations */

  /* Easing aliases */
  --ease-out:    var(--anim-easing);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Radius aliases (kept at compat values so pre-36 components don't regress) */
  --radius-xs:   3px;               /* not in new scale; kept for tier-chip etc. */
  --radius-pill: var(--radius-xl);  /* 20px */
  --radius:      var(--radius-lg);  /* 12px (was var(--radius-md)=10px; ±2px harmless) */

  /* Space-5 / space-7 (not in canonical set; kept for health-bar compat) */
  --space-5: 20px;
  --space-7: 28px;

}