/* ============================================================
   COMMAND SURFACE — Design Tokens (dark default · light "blueprint")
   Source: design-system/MASTER.md  §4–§5
   Dark = Mission Control palette · Light = pre-darkened derivation
   (academy DIAGRAM-GRAMMAR.md). No component may hard-code theme hex.
   ============================================================ */

:root {
  /* ---- fonts ---- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* ---- radii / spacing ---- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px;
  --container: 1200px; --container-wide: 1380px;

  /* ============ DARK (default) ============ */
  --bg: #0a0a0f;
  --bg2: #0d1117;
  --bg3: #0f1420;
  --surface: rgba(13, 17, 23, 0.85);
  --surface2: rgba(15, 23, 50, 0.6);
  --card-grad: linear-gradient(145deg, rgba(13,17,23,0.88), rgba(15,20,30,0.66));

  --foreground: #f1f5f9;
  --text2: #cbd5e1;
  --muted: #94a3b8;          /* readable floor */
  --dim: #7e8ea0;            /* labels tier */

  --border: rgba(0, 240, 255, 0.08);
  --border-bright: rgba(0, 240, 255, 0.22);
  --border-soft: rgba(255, 255, 255, 0.08);

  /* domain accents (MC discipline) */
  --cyan: #00f0ff;
  --gold: #fbbf24;
  --purple: #a855f7;
  --violet: #8b5cf6;
  --blue: #22d3ee;
  --green: #10b981;
  --red: #ff6b6b;
  --accent: var(--cyan);

  /* rgb triplets for alpha mixing */
  --cyan-rgb: 0, 240, 255;
  --gold-rgb: 251, 191, 36;
  --purple-rgb: 168, 85, 247;
  --blue-rgb: 34, 211, 238;
  --green-rgb: 16, 185, 129;
  --red-rgb: 255, 107, 107;

  /* glow discipline: ambient ≤.10 · interactive ≤.15 */
  --glow-ambient: 0 0 24px rgba(0, 240, 255, 0.06);
  --glow-hover: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 240, 255, 0.12);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45);

  /* hero scrim over media plates */
  --hero-scrim: radial-gradient(ellipse 90% 70% at 62% 40%, transparent 0%, rgba(10,10,15,.55) 55%, rgba(10,10,15,.97) 100%);
  --grid-line: rgba(0, 240, 255, 0.04);
  --dot-grid: rgba(148, 163, 184, 0.10);

  /* ---- tiers ---- */
  --tier-free: var(--green);
  --tier-pro: var(--cyan);
  --tier-elite: var(--gold);

  /* ---- blog categories ---- */
  --cat-ai: var(--cyan);
  --cat-engineering: #8b5cf6;
  --cat-strategy: var(--gold);
  --cat-world: var(--blue);
  --cat-crypto: var(--purple);
  --cat-work: var(--green);

  /* ============ DIAGRAM TOKENS (v2 grammar — dark) ============ */
  --dg-bg: #0d1117;
  --dg-surface: #161b22;
  --dg-line: #1e2a3a;
  --dg-text: #e2e8f0;
  --dg-muted: #94a3b8;
  --dg-dim: #7e8ea0;
  --dg-grid: rgba(0, 240, 255, 0.025);
  --dg-frame-border: rgba(0, 240, 255, 0.22);
  --dg-frame-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 24px rgba(0, 240, 255, 0.05);
  --dg-node-bg: linear-gradient(150deg, rgba(13,17,23,.93), rgba(12,18,34,.9));
  --dg-node-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
  --dg-wireglow: rgba(0, 240, 255, 0.4);
  --dg-flow: #bff8ff;
  --c-cyan: #00f0ff; --c-blue: #22d3ee; --c-gold: #fbbf24; --c-amber: #f59e0b;
  --c-purple: #a855f7; --c-violet: #a78bfa; --c-green: #10b981; --c-red: #ff6b6b;
  --c-slate: #94a3b8;

  /* ============ CODE TOKENS (dark) ============ */
  --code-bg: #0d1117;
  --code-border: rgba(0, 240, 255, 0.12);
  --code-text: #e2e8f0;
  --code-keyword: #00f0ff;
  --code-string: #fbbf24;
  --code-number: #a855f7;
  --code-fn: #f8fafc;
  --code-comment: rgba(148, 163, 184, 0.55);

  color-scheme: dark;
}

/* ============ LIGHT — "Blueprint" ============ */
html[data-theme="light"] {
  --bg: #f5f7fb;
  --bg2: #ffffff;
  --bg3: #eef2f8;
  --surface: rgba(255, 255, 255, 0.85);
  --surface2: rgba(240, 247, 250, 0.7);
  --card-grad: linear-gradient(145deg, #ffffff, #f0f7fa);

  --foreground: #0f172a;
  --text2: #1e293b;
  --muted: #475569;
  --dim: #5c6b82;

  --border: rgba(8, 145, 178, 0.15);
  --border-bright: rgba(8, 145, 178, 0.32);
  --border-soft: rgba(15, 23, 42, 0.08);

  --cyan: #0e7490;
  --gold: #b45309;
  --purple: #7c3aed;
  --violet: #6d28d9;
  --blue: #0369a1;
  --green: #047857;
  --red: #dc2626;
  --accent: var(--cyan);

  --cyan-rgb: 14, 116, 144;
  --gold-rgb: 180, 83, 9;
  --purple-rgb: 124, 58, 237;
  --blue-rgb: 3, 105, 161;
  --green-rgb: 4, 120, 87;
  --red-rgb: 220, 38, 38;

  /* glows become soft tinted shadows in light */
  --glow-ambient: 0 8px 24px rgba(8, 15, 35, 0.06);
  --glow-hover: 0 14px 34px rgba(8, 15, 35, 0.12);
  --shadow-card: 0 8px 24px rgba(8, 15, 35, 0.07);

  --hero-scrim: radial-gradient(ellipse 90% 70% at 62% 40%, transparent 0%, rgba(245,247,251,.42) 55%, rgba(245,247,251,.97) 100%);
  --grid-line: rgba(14, 116, 144, 0.05);
  --dot-grid: rgba(15, 23, 42, 0.10);

  --cat-engineering: #6d28d9;

  /* diagram tokens — light (DIAGRAM-GRAMMAR verbatim) */
  --dg-bg: #fafbfc;
  --dg-surface: #ffffff;
  --dg-line: #e1e4e8;
  --dg-text: #24292f;
  --dg-muted: #57606a;
  --dg-dim: #6b7785;
  --dg-grid: rgba(15, 23, 42, 0.045);
  --dg-frame-border: #e1e4e8;
  --dg-frame-shadow: 0 8px 24px rgba(8, 15, 35, 0.07);
  --dg-node-bg: linear-gradient(150deg, #ffffff, #f7fafc);
  --dg-node-shadow: 0 2px 12px rgba(15, 23, 42, 0.07);
  --dg-wireglow: transparent;
  --dg-flow: #0e7490;
  --c-cyan: #0e7490; --c-blue: #0369a1; --c-gold: #b45309; --c-amber: #b45309;
  --c-purple: #7c3aed; --c-violet: #7c3aed; --c-green: #047857; --c-red: #dc2626;
  --c-slate: #64748b;

  /* code tokens — light */
  --code-bg: #f6f8fa;
  --code-border: rgba(8, 145, 178, 0.18);
  --code-text: #24292f;
  --code-keyword: #0e7490;
  --code-string: #b45309;
  --code-number: #7c3aed;
  --code-fn: #0f172a;
  --code-comment: rgba(87, 96, 106, 0.75);

  color-scheme: light;
}