/* MIR design tokens -- the single place colors are decided.
 *
 * Generated from the 3,713 color literals that were spread across 91 pages.
 * Three families, because light mode needs them to invert differently:
 *   --<name>        solid brand / text / surface colors
 *   --<name>-rgb    the same color as components, so rgba(var(--brand-rgb), .2)
 *                   stays on-brand instead of freezing one teal into a border
 *   --surface-N     an overlay ON the page (white on dark, black on light)
 *   --ink-N         translucent TEXT (white on dark, near-black on light)
 * surface and ink are the same literal in dark mode and opposites in light,
 * which is exactly why they had to be told apart by property rather than value.
 */
:root {
  --accent: #667eea;
  --bg: #0a1929;
  --bg-deep: #0a2540;
  --bg-panel: #1a4a5e;
  --bg-raised: #1a202c;
  --brand: #4fd1c5;
  --brand-bright: #5eead4;
  --brand-deep: #2d7d6a;
  --brand-pale: #99f6e4;
  --danger: #fca5a5;
  --danger-strong: #ef4444;
  --ok: #68d391;
  --ok-bright: #86efac;
  --text: #e2e8f0;
  --text-dim: #cccccc;
  --text-dim-2: #cbd5e1;
  --text-faint: #64748b;
  --text-faint-2: #aaaaaa;
  --text-muted: #94a3b8;
  --text-strong: #ffffff;
  --warn: #fbbf24;

  --accent-rgb: 102, 126, 234;
  --bg-rgb: 10, 25, 41;
  --bg-deep-rgb: 10, 37, 64;
  --brand-rgb: 79, 209, 197;
  --brand-bright-rgb: 94, 234, 212;
  --brand-deep-rgb: 45, 125, 106;
  --danger-rgb: 252, 165, 165;
  --danger-strong-rgb: 239, 68, 68;
  --ok-rgb: 104, 211, 145;
  --ok-bright-rgb: 134, 239, 172;
  --text-muted-rgb: 148, 163, 184;
  --warn-rgb: 251, 191, 36;

  --surface-02: rgba(255, 255, 255, 0.02);
  --surface-03: rgba(255, 255, 255, 0.03);
  --surface-05: rgba(255, 255, 255, 0.05);
  --surface-08: rgba(255, 255, 255, 0.08);
  --surface-1: rgba(255, 255, 255, 0.1);
  --surface-15: rgba(255, 255, 255, 0.15);
  --surface-2: rgba(255, 255, 255, 0.2);
  --surface-3: rgba(255, 255, 255, 0.3);
  --surface-4: rgba(255, 255, 255, 0.4);
  --surface-5: rgba(255, 255, 255, 0.5);
  --surface-8: rgba(255, 255, 255, 0.8);

  --ink-3: rgba(255, 255, 255, 0.3);
  --ink-4: rgba(255, 255, 255, 0.4);
  --ink-5: rgba(255, 255, 255, 0.5);
  --ink-6: rgba(255, 255, 255, 0.6);
  --ink-7: rgba(255, 255, 255, 0.7);
  --ink-8: rgba(255, 255, 255, 0.8);
  --ink-9: rgba(255, 255, 255, 0.9);

  --shadow-15: rgba(0, 0, 0, 0.15);
  --shadow-2: rgba(0, 0, 0, 0.2);
  --shadow-3: rgba(0, 0, 0, 0.3);
  --shadow-4: rgba(0, 0, 0, 0.4);
  --shadow-7: rgba(0, 0, 0, 0.7);
}

/* Light mode. Opt-in per visitor via the OS setting, and forceable either way
 * with data-theme on <html> so a person can override what their OS decided.
 * Nothing below changes a single rule -- only what the tokens resolve to. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --accent: #4f46e5;
    --bg: #f7fafc;
    --bg-deep: #eef4f8;
    --bg-panel: #dbeafe;
    --bg-raised: #edf2f7;
    --brand: #0f8a7e;
    --brand-bright: #0d9488;
    --brand-deep: #0b5f52;
    --brand-pale: #115e56;
    --danger: #b91c1c;
    --danger-strong: #dc2626;
    --ok: #15803d;
    --ok-bright: #166534;
    --text: #1e293b;
    --text-dim: #334155;
    --text-dim-2: #475569;
    --text-faint: #94a3b8;
    --text-faint-2: #6b7280;
    --text-muted: #64748b;
    --text-strong: #0f172a;
    --warn: #b45309;

    --accent-rgb: 79, 70, 229;
    --bg-rgb: 247, 250, 252;
    --bg-deep-rgb: 238, 244, 248;
    --brand-rgb: 15, 138, 126;
    --brand-bright-rgb: 13, 148, 136;
    --brand-deep-rgb: 11, 95, 82;
    --danger-rgb: 185, 28, 28;
    --danger-strong-rgb: 220, 38, 38;
    --ok-rgb: 21, 128, 61;
    --ok-bright-rgb: 22, 101, 52;
    --text-muted-rgb: 100, 116, 139;
    --warn-rgb: 180, 83, 9;

    --surface-02: rgba(15, 23, 42, 0.02);
    --surface-03: rgba(15, 23, 42, 0.03);
    --surface-05: rgba(15, 23, 42, 0.05);
    --surface-08: rgba(15, 23, 42, 0.08);
    --surface-1: rgba(15, 23, 42, 0.1);
    --surface-15: rgba(15, 23, 42, 0.15);
    --surface-2: rgba(15, 23, 42, 0.2);
    --surface-3: rgba(15, 23, 42, 0.3);
    --surface-4: rgba(15, 23, 42, 0.4);
    --surface-5: rgba(15, 23, 42, 0.5);
    --surface-8: rgba(15, 23, 42, 0.8);

    --ink-3: rgba(15, 23, 42, 0.3);
    --ink-4: rgba(15, 23, 42, 0.4);
    --ink-5: rgba(15, 23, 42, 0.5);
    --ink-6: rgba(15, 23, 42, 0.6);
    --ink-7: rgba(15, 23, 42, 0.7);
    --ink-8: rgba(15, 23, 42, 0.8);
    --ink-9: rgba(15, 23, 42, 0.9);
  }
}

/* Explicit opt-in, independent of the OS. */
:root[data-theme="light"] {
  --accent: #4f46e5;
  --bg: #f7fafc;
  --bg-deep: #eef4f8;
  --bg-panel: #dbeafe;
  --bg-raised: #edf2f7;
  --brand: #0f8a7e;
  --brand-bright: #0d9488;
  --brand-deep: #0b5f52;
  --brand-pale: #115e56;
  --danger: #b91c1c;
  --danger-strong: #dc2626;
  --ok: #15803d;
  --ok-bright: #166534;
  --text: #1e293b;
  --text-dim: #334155;
  --text-dim-2: #475569;
  --text-faint: #94a3b8;
  --text-faint-2: #6b7280;
  --text-muted: #64748b;
  --text-strong: #0f172a;
  --warn: #b45309;

  --accent-rgb: 79, 70, 229;
  --bg-rgb: 247, 250, 252;
  --bg-deep-rgb: 238, 244, 248;
  --brand-rgb: 15, 138, 126;
  --brand-bright-rgb: 13, 148, 136;
  --brand-deep-rgb: 11, 95, 82;
  --danger-rgb: 185, 28, 28;
  --danger-strong-rgb: 220, 38, 38;
  --ok-rgb: 21, 128, 61;
  --ok-bright-rgb: 22, 101, 52;
  --text-muted-rgb: 100, 116, 139;
  --warn-rgb: 180, 83, 9;

  --surface-02: rgba(15, 23, 42, 0.02);
  --surface-03: rgba(15, 23, 42, 0.03);
  --surface-05: rgba(15, 23, 42, 0.05);
  --surface-08: rgba(15, 23, 42, 0.08);
  --surface-1: rgba(15, 23, 42, 0.1);
  --surface-15: rgba(15, 23, 42, 0.15);
  --surface-2: rgba(15, 23, 42, 0.2);
  --surface-3: rgba(15, 23, 42, 0.3);
  --surface-4: rgba(15, 23, 42, 0.4);
  --surface-5: rgba(15, 23, 42, 0.5);
  --surface-8: rgba(15, 23, 42, 0.8);

  --ink-3: rgba(15, 23, 42, 0.3);
  --ink-4: rgba(15, 23, 42, 0.4);
  --ink-5: rgba(15, 23, 42, 0.5);
  --ink-6: rgba(15, 23, 42, 0.6);
  --ink-7: rgba(15, 23, 42, 0.7);
  --ink-8: rgba(15, 23, 42, 0.8);
  --ink-9: rgba(15, 23, 42, 0.9);
}