/*
 * BeyondEx Orbital Clarity — colors & typography tokens
 * Source of truth: DESIGN.md
 *
 * Two themes:
 *   :root           — light (default, "porcelain")
 *   :root.dark      — dark ("orbital ink")
 *
 * Two accent profiles (data-theme on :root):
 *   default / [data-theme="heritage-teal"]  — Heritage Teal (BeyondEx brand)
 *   [data-theme="premium-brass"]            — Warm brass
 *
 * Status colors are FIXED across all profiles — they carry semantic meaning.
 */

/* ---------- Webfonts ---------- */
/* Geist + Geist Mono, served by Google Fonts CDN. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

/* ============================================================
 * 1. RAW PALETTE TOKENS  (do not consume directly in components)
 * ============================================================ */
:root {
  /* Ink */
  --ink-950: #07111F;
  --ink-900: #0B1220;
  --ink-800: #17243A;
  --ink-700: #25344D;

  /* Neutral */
  --neutral-600: #59677B;
  --neutral-500: #718096;
  --neutral-300: #B8C3D3;
  --neutral-200: #D8E1EC;
  --neutral-100: #EAF0F6;
  --neutral-50:  #F4F7FA;

  /* Surfaces (light theme defaults) */
  --porcelain:       #FAFBFC;
  --surface:         #FFFFFF;
  --surface-muted:   #F5F8FC;
  --surface-raised:  #FFFFFF;
  --surface-sidebar: #F2F4F8;   /* slightly cooler/greyer than canvas */

  /* Lines */
  --line:        #DDE5EF;
  --line-strong: #B9C5D4;

  /* Brand accent — Heritage Teal (default profile) */
  --aurora:        #00A99D;
  --aurora-strong: #007870;
  --aurora-soft:   #D5F2EE;

  /* Signal / spatial — each hue has a base (dark map) + strong (light map) variant */
  --signal-cyan:           #22D3EE;
  --signal-cyan-strong:    #0891B2;
  --signal-violet:         #A78BFA;
  --signal-violet-strong:  #7C3AED;
  --signal-magenta:        #F472B6;
  --signal-magenta-strong: #DB2777;
  --signal-sodium:         #FACC15;
  --signal-sodium-strong:  #CA8A04;
  --signal-coral:          #FB923C;
  --signal-coral-strong:   #EA580C;
  --signal-lime:           #A3E635;
  --signal-lime-strong:    #65A30D;
  --trust-blue:            #2563EB;
  --trust-blue-soft:       #E8F0FF;

  /* Status — FIXED across profiles */
  --evidence-green:      #056A55;
  --evidence-green-soft: #E7F6F1;
  --caution-amber:       #7A4B00;
  --caution-amber-soft:  #FFF4D8;
  --critical-red:        #B42318;
  --critical-red-soft:   #FDE8E5;

  /* Map — light */
  --map-light-water: #DCECF5;
  --map-light-land:  #EDF2F0;
  --map-light-grid:  #AFC2D2;
  --map-light-label: #25344D;

  /* Map — dark (cool neutral, no green tint) */
  --map-void:   #06080C;
  --map-ocean:  #0A0D13;
  --map-land:   #14171F;
  --map-grid:   #353A46;
  --map-label:  #DCE0E7;
  --map-glow:   #21D6C7;

  /* Dark surfaces — cool neutral, no green tint.
     Surface levels chosen for clear visual hierarchy:
       canvas (#0E1117) < surface-muted (#1A1E25) < surface (#252A33) < surface-raised (#2E333D)
     Roughly 6/12/18 lightness steps above canvas, so the composer and
     Bridge visibly LIFT off the canvas instead of blending into it. */
  --dark-app:            #0E1117;  /* canvas */
  --dark-sidebar:        #08090D;  /* sidebar (deeper, recessed) */
  --dark-surface:        #252A33;  /* lifted: composer, Bridge wrap, cards, panels */
  --dark-surface-muted:  #1A1E25;  /* nested recess inside surface: selectors, inputs */
  --dark-surface-raised: #2E333D;  /* modals, top-of-stack panels, active pill */
  --dark-line:           #353A45;
  --dark-line-strong:    #444A58;
  --dark-text:           #E8EAEF;  /* primary text */
  --dark-text-muted:     #A8AFBC;  /* secondary text */
  --dark-text-tertiary:  #7C8390;  /* tertiary text */
  --primary-soft:        #EAF3FB;
}

/* Premium Brass accent profile */
:root[data-theme="premium-brass"] {
  --aurora:        #B8945F;
  --aurora-strong: #8B6F44;
  --aurora-soft:   #F3EAD7;
}

/* ============================================================
 * 2. SEMANTIC TOKENS  (consume these in components)
 * ============================================================ */
:root {
  /* Foreground */
  --fg-1: var(--ink-950);           /* primary text */
  --fg-2: var(--ink-700);           /* secondary text */
  --fg-3: var(--neutral-600);       /* tertiary / muted text */
  --fg-on-accent: var(--ink-950);   /* text on aurora */
  --fg-on-primary: #FFFFFF;         /* text on ink-900 buttons */

  /* Background */
  --bg-app:           var(--porcelain);
  --bg-sidebar:       var(--surface-sidebar);  /* sidebar surface — distinct from canvas */
  --bg-surface:       var(--surface);
  --bg-surface-muted: var(--surface-muted);
  --bg-surface-raised:var(--surface-raised);
  --bg-glass:         color-mix(in oklab, var(--surface) 70%, transparent);

  /* Lines */
  --border:        var(--line);
  --border-strong: var(--line-strong);

  /* Primary action (Orbital Ink) */
  --primary:    var(--ink-900);
  --primary-fg: #FFFFFF;

  /* Accent (Aurora — Heritage Teal by default) */
  --accent:        var(--aurora);
  --accent-strong: var(--aurora-strong);
  --accent-soft:   var(--aurora-soft);

  /* Status — semantic groups */
  --status-evidence-bg: var(--evidence-green-soft);
  --status-evidence-fg: var(--evidence-green);
  --status-warning-bg:  var(--caution-amber-soft);
  --status-warning-fg:  var(--caution-amber);
  --status-critical-bg: var(--critical-red-soft);
  --status-critical-fg: var(--critical-red);
  --status-info-bg:     var(--trust-blue-soft);
  --status-info-fg:     var(--trust-blue);
  --status-neutral-bg:  var(--neutral-50);
  --status-neutral-fg:  var(--ink-700);

  /* Shadows */
  --shadow-reading:  0 1px 0 rgba(11, 18, 32, 0.04);
  --shadow-floating: 0 1px 2px rgba(11, 18, 32, 0.04), 0 8px 24px rgba(11, 18, 32, 0.08);
  --shadow-modal:    0 4px 8px rgba(11, 18, 32, 0.06), 0 24px 56px rgba(11, 18, 32, 0.16);
  --blur-glass:      14px;
  --scrim-map:       linear-gradient(180deg, rgba(7,17,31,0.0) 0%, rgba(7,17,31,0.38) 100%);

  /* Motion */
  --motion-fast:     140ms;
  --motion-standard: 200ms;
  --motion-panel:    240ms;
  --map-fly-to:      560ms;
  --ease-standard:    cubic-bezier(0.32, 0.72, 0, 1);
  --ease-emphasized:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:        cubic-bezier(0.45, 0, 0.55, 1);

  /* Focus */
  --focus-ring-color: var(--signal-cyan);
  --focus-ring:       0 0 0 2px var(--bg-app), 0 0 0 4px var(--focus-ring-color);

  /* Radii */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-xxl:  28px;
  --r-pill: 9999px;

  /* Spacing */
  --s-hairline: 1px;
  --s-xs:  4px;
  --s-sm:  8px;
  --s-md:  12px;
  --s-lg:  16px;
  --s-xl:  24px;
  --s-xxl: 32px;
  --s-section: 48px;
  --s-touch:   44px;

  /* Layout constants */
  --w-nav-rail:          68px;
  --w-inspector:         360px;
  --w-map-panel-compact: 320px;
  --w-map-copilot:       380px;
  --w-map-panel-wide:    440px;

  /* Z-index scale (fixed) */
  --z-base: 0;
  --z-overlay-map: 10;
  --z-panel-map: 20;
  --z-bridge: 30;
  --z-drawer: 40;
  --z-popover: 50;
  --z-menu: 60;
  --z-dialog: 70;
  --z-approval-critical: 80;
  --z-toast: 90;
  --z-system-blocker: 100;
}

/* Dark theme overrides */
:root.dark,
.dark {
  --fg-1: var(--dark-text);
  --fg-2: var(--dark-text-muted);
  --fg-3: var(--dark-text-tertiary);
  --fg-on-primary: var(--ink-950);

  /* THREE distinct surface levels for clear hierarchy:
     sidebar (deepest) < canvas < surface (lifted) < surface-raised
     This makes the composer / cards visibly LIFT off the canvas —
     no more "chat input dies in the background". */
  --bg-app:           var(--dark-app);
  --bg-sidebar:       var(--dark-sidebar);
  --bg-surface:       var(--dark-surface);
  --bg-surface-muted: var(--dark-surface-muted);
  --bg-surface-raised:var(--dark-surface-raised);
  --bg-glass:         color-mix(in oklab, var(--dark-surface) 76%, transparent);

  --border:        var(--dark-line);
  --border-strong: var(--dark-line-strong);

  /* Primary action — same Orbital Ink hex in both themes. The pill sits on
     LIFTED surfaces (composer, Bridge wrap, action bars), not the canvas
     itself, so an ink-900 pill on a #252A33 surface reads as a "pressed-in
     deep key" — the inverse of light mode's "dark key on white" but the
     same brand color. Consistent and on-spec. */
  --primary:    var(--ink-900);
  --primary-fg: #FFFFFF;

  /* Status soft fills become low-luminance tints in dark */
  --status-evidence-bg: rgba(5, 106, 85, 0.18);
  --status-evidence-fg: #6FD9C0;
  --status-warning-bg:  rgba(122, 75, 0, 0.22);
  --status-warning-fg:  #F0C57A;
  --status-critical-bg: rgba(180, 35, 24, 0.22);
  --status-critical-fg: #F19390;
  --status-info-bg:     rgba(37, 99, 235, 0.18);
  --status-info-fg:     #8BB0FF;
  --status-neutral-bg:  var(--dark-surface-muted);
  --status-neutral-fg:  var(--dark-text-muted);

  --shadow-reading:  0 1px 0 rgba(0,0,0,0.3);
  --shadow-floating: 0 1px 2px rgba(0,0,0,0.32), 0 12px 28px rgba(0,0,0,0.42);
  --shadow-modal:    0 4px 8px rgba(0,0,0,0.4), 0 28px 64px rgba(0,0,0,0.55);
}

/* ============================================================
 * 3. TYPOGRAPHY SCALE
 * ============================================================ */
:root {
  --font-sans: "Geist", "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Sizes */
  --type-hero-size:    56px;
  --type-display-size: 40px;
  --type-title-size:   24px;
  --type-heading-size: 18px;
  --type-body-size:    15px;
  --type-compact-size: 13px;
  --type-label-size:   13px;
  --type-data-size:    12px;

  /* Weights */
  --w-regular:   400;
  --w-medium:    500;
  --w-semibold:  610;
  --w-strong:    640;
  --w-display:   680;
}

/* Semantic typography roles (use these on actual elements) */
.t-hero,
h1.hero {
  font-family: var(--font-sans);
  font-size: var(--type-hero-size);
  font-weight: 680;
  line-height: 1.04;
  letter-spacing: 0;
  color: var(--fg-1);
}
.t-display,
h1 {
  font-family: var(--font-sans);
  font-size: var(--type-display-size);
  font-weight: 640;
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--fg-1);
}
.t-title,
h2 {
  font-family: var(--font-sans);
  font-size: var(--type-title-size);
  font-weight: 620;
  line-height: 1.2;
  color: var(--fg-1);
}
.t-heading,
h3 {
  font-family: var(--font-sans);
  font-size: var(--type-heading-size);
  font-weight: 610;
  line-height: 1.3;
  color: var(--fg-1);
}
.t-body,
p,
body {
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  font-weight: 400;
  line-height: 1.55;
  color: var(--fg-1);
}
.t-compact {
  font-family: var(--font-sans);
  font-size: var(--type-compact-size);
  font-weight: 430;
  line-height: 1.4;
  color: var(--fg-2);
}
.t-label {
  font-family: var(--font-sans);
  font-size: var(--type-label-size);
  font-weight: 590;
  line-height: 1.25;
  color: var(--fg-1);
}
.t-data,
code,
.mono {
  font-family: var(--font-mono);
  font-size: var(--type-data-size);
  font-weight: 500;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}

/* Tabular-nums helper (applies wherever digits should align) */
.tnum {
  font-variant-numeric: tabular-nums;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-standard: 0ms;
    --motion-panel: 0ms;
    --map-fly-to: 0ms;
  }
}