/**
 * Crisis Monitor — Design Tokens
 * Institutional quiet-tech aesthetic. Dual-mode OKLCH palette.
 *
 *  - dark: graphite (#0a0a0f) — default, monitoring UI
 *  - light: avorio (#fafaf9) — credibility, reports, print
 *
 * Typography:
 *  - General Sans (display) — editorial, institutional
 *  - Inter variable (body) — dense UI, tabular numbers
 *
 * Naming is semantic (not literal colors). E.g. --bg-canvas,
 * not --graphite-900. Enables dark/light swap via data-theme.
 */

/* ============================================================
   DARK MODE — graphite (default)
   ============================================================ */
:root,
:root[data-theme="dark"] {
  /* Surfaces */
  --bg-canvas:     oklch(14% 0.008 250);  /* page background */
  --bg-surface:    oklch(18% 0.008 250);  /* cards, panels */
  --bg-elevated:   oklch(22% 0.008 250);  /* hover, dropdowns */
  --bg-overlay:    oklch(10% 0.005 250 / 0.72);  /* modals backdrop */
  --bg-muted:      oklch(16% 0.005 250);  /* subtle fills */

  /* Text */
  --text-primary:   oklch(95% 0.005 250);
  --text-secondary: oklch(72% 0.008 250);
  --text-tertiary:  oklch(52% 0.008 250);
  --text-inverse:   oklch(14% 0.008 250);  /* on colored surfaces */

  /* Borders */
  --border-subtle:  oklch(22% 0.008 250);
  --border-default: oklch(28% 0.008 250);
  --border-strong:  oklch(40% 0.008 250);

  /* Accents (reserved, used sparingly) */
  --accent-primary: oklch(72% 0.14 220);   /* operational blue */
  --accent-muted:   oklch(72% 0.14 220 / 0.12);

  /* Severity (BlackRock-style palette) */
  --severity-stable:   oklch(68% 0.14 150);   /* green */
  --severity-watch:    oklch(68% 0.12 230);   /* blue */
  --severity-warning:  oklch(74% 0.15 85);    /* amber */
  --severity-alert:    oklch(68% 0.17 45);    /* orange */
  --severity-critical: oklch(62% 0.22 25);    /* red */

  /* Signal */
  --signal-positive: oklch(68% 0.14 150);   /* improving */
  --signal-negative: oklch(64% 0.2 25);     /* worsening */
  --signal-neutral:  oklch(60% 0.008 250);

  /* Shadows (soft, not glow) */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-sm: 0 2px 4px -1px rgb(0 0 0 / 0.32), 0 1px 2px -1px rgb(0 0 0 / 0.2);
  --shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.36), 0 2px 4px -2px rgb(0 0 0 / 0.2);
  --shadow-lg: 0 12px 24px -6px rgb(0 0 0 / 0.4), 0 4px 8px -4px rgb(0 0 0 / 0.22);
  --shadow-focus: 0 0 0 3px oklch(72% 0.14 220 / 0.3);
}

/* ============================================================
   PAPER MODE — Notamy Paper (2026, default)
   Warm cream background (Anthropic / Every.to / FT lineage) + warm
   charcoal ink + single bold claret accent. Anti-"tech-dark" — the
   look of a premium intelligence publication, not a trader terminal.
   Both [data-theme="paper"] and legacy [data-theme="light"] map here.
   ============================================================ */
:root[data-theme="paper"],
:root[data-theme="light"] {
  /* Surfaces — warm paper hierarchy. Chroma reduced from 0.022 → 0.014
     for editorial-clean cream (less kraft/sandy on uncalibrated displays,
     closer to Anthropic / Every.to / FT premium-paper feel). */
  --bg-canvas:     oklch(94% 0.014 80);   /* paper cream ~#F6F1E6 */
  --bg-surface:    oklch(96.5% 0.012 80); /* card                 */
  --bg-elevated:   oklch(98% 0.010 80);   /* hover, dropdown      */
  --bg-overlay:    oklch(18% 0.02 60 / 0.38);
  --bg-muted:      oklch(91% 0.014 80);   /* subtle fills         */

  /* Ink — warm charcoal, never pure black */
  --text-primary:   oklch(18% 0.012 60);  /* ~#1A1815 warm charcoal */
  --text-secondary: oklch(34% 0.010 60);
  --text-tertiary:  oklch(56% 0.009 60);
  --text-inverse:   oklch(96% 0.018 80);

  /* Borders */
  --border-subtle:  oklch(90% 0.018 80);
  --border-default: oklch(84% 0.022 80);
  --border-strong:  oklch(72% 0.028 80);

  /* Accents — single bold warm claret, muted everywhere else */
  --accent-primary: oklch(50% 0.17 30);   /* ~#B5321A claret-warm  */
  --accent-muted:   oklch(50% 0.17 30 / 0.10);

  /* Severity — warm palette, kept legible on cream. CRITICAL is
     intentionally NOT brand claret: a "CRITICAL" badge next to a
     claret heading would lose its alarm signal. Critical = orange-red
     (more saturated than --severity-alert) so the eye reads danger
     before brand. */
  --severity-stable:   oklch(52% 0.10 195); /* FT teal #0D7680      */
  --severity-watch:    oklch(52% 0.10 195);
  --severity-warning:  oklch(64% 0.16 65);  /* amber                */
  --severity-alert:    oklch(58% 0.18 38);  /* orange-red, mid-alarm */
  --severity-critical: oklch(54% 0.22 25);  /* deep orange-red, max alarm */

  /* Signal — risk-direction encoded: up = worsening (claret) */
  --signal-positive: oklch(52% 0.10 195);   /* improving = teal     */
  --signal-negative: oklch(50% 0.17 30);    /* worsening = claret   */
  --signal-neutral:  oklch(50% 0.008 60);

  --shadow-xs: 0 1px 2px 0 rgb(26 24 21 / 0.05);
  --shadow-sm: 0 2px 4px -1px rgb(26 24 21 / 0.06), 0 1px 2px -1px rgb(26 24 21 / 0.04);
  --shadow-md: 0 4px 8px -2px rgb(26 24 21 / 0.08), 0 2px 4px -2px rgb(26 24 21 / 0.04);
  --shadow-lg: 0 12px 24px -6px rgb(26 24 21 / 0.12), 0 4px 8px -4px rgb(26 24 21 / 0.06);
  --shadow-focus: 0 0 0 3px oklch(50% 0.17 30 / 0.25);

  /* ------------------------------------------------------------
     Legacy aliases — legacy ported CSS classes (cluster-1/2/3/…)
     reference their own variable names. All mapped to Paper values
     here so selector specificity (0,1,1) beats the :root fallback.
     ------------------------------------------------------------ */
  /* Surfaces (legacy names) — chroma reduced to 0.014 to match the
     new --bg-canvas. Otherwise legacy `bg-primary` would be warmer
     than `bg-canvas` on the same surface and create a visible seam. */
  --bg-primary:    oklch(94% 0.014 80);      /* paper cream  — #F6F1E6 */
  --bg-secondary:  oklch(96.5% 0.012 80);    /* card surface */
  --bg-tertiary:   oklch(91% 0.014 80);      /* subtle fill  */
  --bg-hover:      oklch(98% 0.010 80);      /* hover tint   */

  /* Borders */
  --border-color:  rgba(26, 24, 21, 0.12);

  /* Text */
  --text-muted:    oklch(56% 0.009 60);      /* alias for tertiary */

  /* Accents (legacy names → paper equivalents) */
  --accent-red:    #B5321A;   /* claret-warm, critical  */
  --accent-orange: #C97B1F;   /* amber, warning          */
  --accent-yellow: #D4A017;   /* warm gold, watch        */
  --accent-teal:   #0D7680;   /* FT teal, positive/link  */
  --accent-blue:   #2B5C8A;   /* warm blue, info         */
  --accent-green:  #0E7D5A;   /* deep green, positive    */
  --accent-purple: #7C4A8F;   /* muted purple            */
  --accent-indigo: #7C4A8F;   /* alias of purple — legacy "indigo" ports land here */

  /* Status scale — critical now matches --severity-critical (orange-red,
     not brand claret) so badge urgency reads above brand identity. */
  --status-critical: #C73D14;   /* deep orange-red (severity-critical) */
  --status-high:     #C97B1F;
  --status-medium:   #D4A017;
  --status-low:      #0E7D5A;

  /* Cyberpunk aliases → mapped to paper accents so ported rules
     that still reference --cp-* don't fall back to dark defaults.
     Removed the neon glow on purpose: paper wants ink, not neon. */
  --cp-stable:   #0E7D5A;
  --cp-accent:   #0D7680;
  --cp-critical: #C73D14;       /* aligned with --status-critical */
  --cp-purple:   #7C4A8F;
  --cp-mono:     'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Scrollbar */
  --scrollbar-thumb: rgba(26, 24, 21, 0.18);

  /* Spacing (legacy semantic names — mapped onto the 8-px grid) */
  --space-xs: 0.25rem;  /* 4  — same as --space-1 */
  --space-sm: 0.5rem;   /* 8  — same as --space-2 */
  --space-md: 1rem;     /* 16 — same as --space-4 */
  --space-lg: 1.5rem;   /* 24 — same as --space-5 */
  --space-xl: 2rem;     /* 32 — same as --space-6 */

  /* --radius-sm/md/lg are already defined at :root — no override needed. */
}

/* ============================================================
   TYPOGRAPHY — Inter Tight (display/UI) + Inter (body) + JetBrains Mono (data)
   ============================================================ */
:root {
  /* Type families.
     Inter Tight for display/UI (tighter tracking, more "tech" feel — same
     pattern adopted by Perplexity, Linear, Vercel). Inter for body prose.
     JetBrains Mono for data, scores, ISO codes, code blocks. All variable
     axes loaded from Google Fonts via index.html. */
  --font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (modular 1.2 ratio, 16px base) */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.35rem;    /* 21.6px */
  --text-xl:   1.62rem;    /* 26px */
  --text-2xl:  1.94rem;    /* 31px */
  --text-3xl:  2.33rem;    /* 37px */
  --text-4xl:  2.8rem;     /* 45px */

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.75;
  /* Prose: for Argus long-form answers and pre-gen narrative blocks.
     Slightly more open than --leading-relaxed; tuned for reading
     paragraphs of analyst prose at 16-17px on the paper canvas. */
  --leading-prose:   1.68;

  /* Letter spacing */
  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.02em;
  --tracking-widest:   0.12em;

  /* Weights */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Spacing (8px grid) */
  --space-0:  0;
  --space-1:  0.25rem;    /* 4 */
  --space-2:  0.5rem;     /* 8 */
  --space-3:  0.75rem;    /* 12 */
  --space-4:  1rem;       /* 16 */
  --space-5:  1.5rem;     /* 24 */
  --space-6:  2rem;       /* 32 */
  --space-7:  3rem;       /* 48 */
  --space-8:  4rem;       /* 64 */
  --space-9:  6rem;       /* 96 */

  /* Radii */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Transitions (institutional: subtle, not flashy) */
  --transition-fast:  120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:  200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  380ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index scale */
  --z-base:       0;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-fixed:      300;
  --z-overlay:    400;
  --z-modal:      500;
  --z-toast:      600;
  --z-tooltip:    700;
  --z-command:    800;

  /* Shell layout — single source of truth for chrome dimensions.
     Reference these from layout CSS, never hardcode the px values.
     Sidebar is icon-only on desktop (Linear / Slack pattern); labels
     are intentionally hidden so only the symbol carries the meaning. */
  --nav-height:      56px;
  --sidebar-width:   64px;
  --sidebar-mobile:  280px;
  --shell-breakpoint: 1024px;
}

/* ============================================================
   TYPOGRAPHY DEFAULTS
   ============================================================ */
html {
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Inter stylistic sets for cleaner numerals */
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

body {
  background: var(--bg-canvas);
  color: var(--text-primary);
  line-height: var(--leading-normal);
  transition: background var(--transition-base), color var(--transition-base);
}

h1, h2, h3, h4, h5, h6,
.display {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin: 0;
}

code, pre, .mono, [data-mono] {
  font-family: var(--font-mono);
}

/* Tabular numerals for KPI, tables, score readouts */
.num, .kpi, [data-tabular], td.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Print — always light for reports/decks */
@media print {
  :root {
    --bg-canvas: white;
    --text-primary: black;
  }
}