/* Skytteform designs.
 *
 * Each design is a set of tokens on <html data-design="…">, with a light set and
 * a dark set. Dark applies when data-theme="dark", or when the OS prefers dark
 * and the visitor hasn't picked light. Components in app.css only read tokens.
 *
 * Tokens: colours (bg, surface, surface-2, border, text, muted, accent, accent-soft,
 * accent-text, on-accent, chart-grid, chart-lo, chart-hi), hero (hero-bg, hero-text,
 * hero-muted), type (font, font-display, font-num, display-weight, display-case,
 * display-spacing), shape (radius, radius-sm, shadow, card-border).
 */

/* ---------------------------------------------------------------- Nordic: Danish red on crisp white */
:root, [data-design="nordic"] {
  --bg: #f6f7f9; --surface: #ffffff; --surface-2: #eef1f5; --border: #e1e5eb;
  --text: #0f1b2d; --muted: #5b6b80; --accent: #c8102e; --accent-soft: #fdecef; --accent-text: #a50d26; --on-accent: #fff;
  --chart-grid: #e9edf2; --chart-lo: #f9c9d0; --chart-hi: #8a0a1f;
  --hero-bg: radial-gradient(900px 380px at 100% 0%, rgba(200,16,46,.35), transparent 60%), #0f1b2d;
  --hero-text: #ffffff; --hero-muted: #a9b6c8;
  --font: "Inter", system-ui, sans-serif; --font-display: "Fraunces", Georgia, serif; --font-num: "Inter", system-ui, sans-serif;
  --display-weight: 600; --display-case: none; --display-spacing: -.02em;
  --radius: 12px; --radius-sm: 8px; --card-border: 1px solid var(--border);
  --shadow: 0 1px 2px rgba(15,27,45,.04), 0 6px 18px rgba(15,27,45,.05);
  color-scheme: light;
}
[data-design="nordic"][data-theme="dark"] {
  --bg: #0b1220; --surface: #111a2b; --surface-2: #18233a; --border: #24314b;
  --text: #e9eef6; --muted: #8fa0b8; --accent: #ff4d63; --accent-soft: #3a1520; --accent-text: #ff8a99; --on-accent: #fff;
  --chart-grid: #1c2840; --chart-lo: #4a1b26; --chart-hi: #ff6b7e;
  --hero-bg: radial-gradient(900px 380px at 100% 0%, rgba(255,77,99,.28), transparent 60%), #070d18;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3); color-scheme: dark;
}

/* ---------------------------------------------------------------- Scoreboard: sports-broadcast, condensed caps, lime */
[data-design="scoreboard"] {
  --bg: #eef0f2; --surface: #ffffff; --surface-2: #e4e8ec; --border: #d3d9df;
  --text: #0b0f14; --muted: #5d6874; --accent: #0f9d58; --accent-soft: #dcf5e7; --accent-text: #0b7a44; --on-accent: #fff;
  --chart-grid: #e2e6ea; --chart-lo: #b9ecd0; --chart-hi: #0a5c34;
  --hero-bg: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 14px, transparent 14px 28px), linear-gradient(120deg, #0b0f14 55%, #12301f);
  --hero-text: #ffffff; --hero-muted: #9aa7b4;
  --font: "Barlow", system-ui, sans-serif; --font-display: "Barlow Condensed", "Arial Narrow", sans-serif; --font-num: "Barlow Condensed", sans-serif;
  --display-weight: 700; --display-case: uppercase; --display-spacing: .01em;
  --radius: 4px; --radius-sm: 3px; --card-border: 1px solid var(--border);
  --shadow: none;
  color-scheme: light;
}
[data-design="scoreboard"][data-theme="dark"] {
  --bg: #07090c; --surface: #0f1318; --surface-2: #171c23; --border: #232b35;
  --text: #eef2f6; --muted: #8995a3; --accent: #c6ff3d; --accent-soft: #232f10; --accent-text: #c6ff3d; --on-accent: #0a0d10;
  --chart-grid: #1a2029; --chart-lo: #2b3a12; --chart-hi: #c6ff3d;
  --hero-bg: repeating-linear-gradient(135deg, rgba(198,255,61,.04) 0 14px, transparent 14px 28px), linear-gradient(120deg, #07090c 55%, #1b2a09);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- Heritage: hunting green, cream paper, brass */
[data-design="heritage"] {
  --bg: #f3efe4; --surface: #fbf9f3; --surface-2: #ebe4d3; --border: #dbd1bb;
  --text: #1f2a1c; --muted: #6d6a55; --accent: #355e3b; --accent-soft: #e2ebdc; --accent-text: #2b4c30; --on-accent: #fbf9f3;
  --chart-grid: #e6dfcd; --chart-lo: #d8c79a; --chart-hi: #26442b;
  --hero-bg: radial-gradient(700px 300px at 85% 10%, rgba(176,141,60,.35), transparent 60%), #1e2f1f;
  --hero-text: #f6f0df; --hero-muted: #c7c0a5;
  --font: "Source Sans 3", system-ui, sans-serif; --font-display: "Playfair Display", Georgia, serif; --font-num: "Source Sans 3", sans-serif;
  --display-weight: 700; --display-case: none; --display-spacing: -.01em;
  --radius: 6px; --radius-sm: 4px; --card-border: 1px solid var(--border);
  --shadow: 0 1px 0 rgba(31,42,28,.06);
  color-scheme: light;
}
[data-design="heritage"][data-theme="dark"] {
  --bg: #11150f; --surface: #191f16; --surface-2: #222a1e; --border: #2f3a29;
  --text: #ece6d3; --muted: #a39e85; --accent: #b08d3c; --accent-soft: #2e2716; --accent-text: #d8b866; --on-accent: #11150f;
  --chart-grid: #242c1f; --chart-lo: #3a3420; --chart-hi: #d8b866;
  --hero-bg: radial-gradient(700px 300px at 85% 10%, rgba(176,141,60,.25), transparent 60%), #0b0e09;
  --shadow: none; color-scheme: dark;
}

/* ---------------------------------------------------------------- Mono: editorial black and white, hard lines, electric blue */
[data-design="mono"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f3f3f3; --border: #0a0a0a;
  --text: #0a0a0a; --muted: #666666; --accent: #2b50ff; --accent-soft: #e8ecff; --accent-text: #1f3fe0; --on-accent: #fff;
  --chart-grid: #ececec; --chart-lo: #c9d2ff; --chart-hi: #1530b8;
  --hero-bg: #ffffff; --hero-text: #0a0a0a; --hero-muted: #666666;
  --font: "Space Grotesk", system-ui, sans-serif; --font-display: "Space Grotesk", system-ui, sans-serif; --font-num: "IBM Plex Mono", ui-monospace, monospace;
  --display-weight: 700; --display-case: none; --display-spacing: -.04em;
  --radius: 0; --radius-sm: 0; --card-border: 1.5px solid var(--border);
  --shadow: none;
  color-scheme: light;
}
[data-design="mono"][data-theme="dark"] {
  --bg: #0a0a0a; --surface: #0a0a0a; --surface-2: #171717; --border: #f2f2f2;
  --text: #f2f2f2; --muted: #9a9a9a; --accent: #7d93ff; --accent-soft: #161d3d; --accent-text: #a3b3ff; --on-accent: #0a0a0a;
  --chart-grid: #222222; --chart-lo: #1d2550; --chart-hi: #a3b3ff;
  --hero-bg: #0a0a0a; --hero-text: #f2f2f2; --hero-muted: #9a9a9a; color-scheme: dark;
}

/* ---------------------------------------------------------------- Ember: the original orange design */
[data-design="ember"] {
  --bg: #f6f5f2; --surface: #ffffff; --surface-2: #f0eee9; --border: #e3e0d8;
  --text: #1c1917; --muted: #78716c; --accent: #ea580c; --accent-soft: #fff1e6; --accent-text: #c2410c; --on-accent: #fff;
  --chart-grid: #ece9e2; --chart-lo: #fdba74; --chart-hi: #9a3412;
  --hero-bg: radial-gradient(1200px 400px at 90% -20%, rgba(234,88,12,.35), transparent 60%), linear-gradient(135deg, #1c1917, #292524);
  --hero-text: #fafaf9; --hero-muted: #d6d3d1;
  --font: "Inter", system-ui, sans-serif; --font-display: "Inter", system-ui, sans-serif; --font-num: "Inter", system-ui, sans-serif;
  --display-weight: 750; --display-case: none; --display-spacing: -.02em;
  --radius: 14px; --radius-sm: 10px; --card-border: 1px solid var(--border);
  --shadow: 0 1px 2px rgba(28,25,23,.05), 0 4px 16px rgba(28,25,23,.05);
  color-scheme: light;
}
[data-design="ember"][data-theme="dark"] {
  --bg: #0f0f10; --surface: #18181b; --surface-2: #222226; --border: #2e2e33;
  --text: #f4f4f5; --muted: #a1a1aa; --accent: #fb7a35; --accent-soft: #2a1a10; --accent-text: #fdba8c;
  --chart-grid: #26262b; --chart-lo: #7c2d12; --chart-hi: #fdba74;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.25); color-scheme: dark;
}