/* Masters of Info Support design system — tokens, compiled from docs/design-system/tokens.json.
   Hand-compiled following the design system's own tokens.css contract (reference/format.md):
   themed color+shadow vars first (dark = first/default theme), then theme-agnostic vars,
   then one class per type style, then @font-face per self-hosted font file. */

:root,
[data-theme="dark"] {
  --bg: #07090f;
  --surface: #0b0f1a;
  --raised: #141b2c;
  --line: #1a2133;
  --line-strong: #56658a;
  --text: #e4e9f2;
  --muted: #a9b4c8;
  --subtle: #8a96ae;
  --accent: #5bc8f0;
  --accent-text: #5bc8f0;
  --on-accent: #07090f;
  --magenta: #ff2e88;
  --magenta-text: #ff7ab6;
  --magenta-soft: #1a0f1c;
  --on-magenta: #07090f;
  --info: #8ec5ff;
  --info-soft: #13213a;
  --success: #6ee0b0;
  --success-soft: #0f2a22;
  --warning: #f5a66e;
  --warning-soft: #2a1a10;
  --danger: #ff8a8a;
  --danger-soft: #2a1214;
  --focus-ring: 0 0 0 3px #5bc8f080;
}

[data-theme="light"] {
  --bg: #f3f5f9;
  --surface: #ffffff;
  --raised: #ebeff5;
  --line: #dde2ea;
  --line-strong: #7d889e;
  --text: #0b1020;
  --muted: #45506a;
  --subtle: #5d6880;
  --accent: #0b7fb3;
  --accent-text: #0a6e9c;
  --on-accent: #ffffff;
  --magenta: #d1146a;
  --magenta-text: #b0105a;
  --magenta-soft: #fdeaf3;
  --on-magenta: #ffffff;
  --info: #1d5fc4;
  --info-soft: #e6eefc;
  --success: #0f7a55;
  --success-soft: #e3f5ee;
  --warning: #9a4a12;
  --warning-soft: #fdeee3;
  --danger: #c42b2b;
  --danger-soft: #fdecec;
  --focus-ring: 0 0 0 3px #0b7fb366;
}

/* ---------- Brand retint: CodeBash ----------
   The "Masters of Info Support" design (layout, components, type) stays the same; these two
   blocks swap the accent/magenta tokens (plus the surfaces they sit on) for the official
   CodeBash 2026 key art's navy/lime/pink palette, sampled from that artwork. Compound selectors
   (not source order) are what makes these win over the blocks above. Functional status colors
   (info/success/warning/danger) are deliberately left alone — those encode state, not brand. */
[data-theme="dark"][data-brand="codebash"] {
  --bg: #0e1230;
  --surface: #161b3d;
  --raised: #20264f;
  --line: #262c52;
  --line-strong: #626da0;
  --accent: #cfe000;
  --accent-text: #cfe000;
  --on-accent: #0e1230;
  --magenta: #ff6fc9;
  --magenta-text: #ff8fd6;
  --magenta-soft: #2a1332;
  --on-magenta: #0e1230;
  --focus-ring: 0 0 0 3px #cfe00080;
}

[data-theme="light"][data-brand="codebash"] {
  --bg: #f5f7ee;
  --surface: #ffffff;
  --raised: #eef1e0;
  --line: #dde0cf;
  --line-strong: #7d885a;
  --accent: #5c7300;
  --accent-text: #5c7300;
  --on-accent: #ffffff;
  --magenta: #c21e85;
  --magenta-text: #a3166e;
  --magenta-soft: #fbe8f4;
  --on-magenta: #ffffff;
  --focus-ring: 0 0 0 3px #5c730066;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-14: 56px;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  --font-sans: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;
}

/* ---------- Type styles ---------- */
.display { font: 700 76px/0.92 var(--font-sans); letter-spacing: -0.04em; }
.h1 { font: 700 40px/1.05 var(--font-sans); letter-spacing: -0.03em; }
.h2 { font: 700 28px/1.15 var(--font-sans); letter-spacing: -0.02em; }
.h3 { font: 700 20px/1.25 var(--font-sans); }
.body-lg { font: 400 18px/1.5 var(--font-sans); }
.body { font: 400 15px/1.5 var(--font-sans); }
.body-sm { font: 400 14px/1.5 var(--font-sans); }
.label { font: 600 15px/1.3 var(--font-sans); }
.eyebrow { font: 400 14px/1.4 var(--font-mono); }
.mono-data { font: 500 15px/1.4 var(--font-mono); }
.mono-label { font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.06em; }
.set-letter { font: 700 17px/1 var(--font-mono); }

@media (max-width: 720px) {
  .display { font-size: 48px; }
}

/* ---------- Fonts (self-hosted, see wwwroot/fonts) ---------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk/space-grotesk-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk/space-grotesk-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk/space-grotesk-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk/space-grotesk-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono/jetbrains-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono/jetbrains-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}