/* ==========================================================================
   Design tokens — Swiss grid
   Drie thema's: light (standaard), dim, dark. "Systeem" kiest light/dark
   via prefers-color-scheme en zet dan zelf data-theme (zie js/theme.js).
   ========================================================================== */

:root,
:root[data-theme="light"] {
  --bg: #FFFFFF;
  --ink: #111111;
  --muted: #5E6168;
  --hairline: #E3E4E7;
  --rule: #111111;
  --accent: #FF4A1C;        /* alleen voor vlakken, lijnen en tekst >= 24px */
  --accent-text: #C2330F;   /* accent als kleine tekst (contrast >= 4.5:1) */
  --surface-hover: #F4F4F5;
  --inverse-bg: #111111;
  --inverse-ink: #FFFFFF;
  --danger: #A12A0C;
  color-scheme: light;
}

:root[data-theme="dim"] {
  --bg: #23272E;
  --ink: #E8EAED;
  --muted: #A3A9B3;
  --hairline: #3A4049;
  --rule: #E8EAED;
  --accent: #FF6A42;
  --accent-text: #FF8A68;
  --surface-hover: #2C3139;
  --inverse-bg: #E8EAED;
  --inverse-ink: #23272E;
  --danger: #FF8A68;
  color-scheme: dark;
}

:root[data-theme="dark"] {
  --bg: #0B0B0C;
  --ink: #F2F2F3;
  --muted: #9B9DA3;
  --hairline: #26272A;
  --rule: #F2F2F3;
  --accent: #FF5A2E;
  --accent-text: #FF7A55;
  --surface-hover: #161618;
  --inverse-bg: #F2F2F3;
  --inverse-ink: #0B0B0C;
  --danger: #FF7A55;
  color-scheme: dark;
}

:root {
  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --gutter: 20px;
  --nav-h: 58px;
  --content-max: 720px;
  --tap: 44px;
}

/* ==========================================================================
   Magazine-tokens. Neutraal: afgeleid van het thema hierboven.
   Met clubkleuren (data-club="on") overschreven per club en per thema.
   ========================================================================== */
:root {
  --on-accent: #FFFFFF;
  --band: var(--inverse-bg);
  --band-ink: var(--inverse-ink);
  --band-muted: var(--inverse-ink);
  --tag: var(--accent);
  --tag-ink: #FFFFFF;
  --figure: var(--ink);
  --btn: var(--inverse-bg);
  --btn-ink: var(--inverse-ink);
  --crest-bg: var(--surface-hover);
  --crest-ink: var(--ink);
  --win: var(--inverse-bg);
  --win-ink: var(--inverse-ink);
  --draw: var(--surface-hover);
  --draw-ink: var(--ink);
  --photo: #2B2C30;
  --card: var(--bg);
}

/* SC Cambuur: blauw #0A3A8C, geel #FFD100, navy #0A2A66 */
:root[data-club="on"][data-theme="light"],
:root[data-club="on"]:not([data-theme]) {
  --accent: #0A3A8C; --accent-text: #0A3A8C; --on-accent: #FFFFFF;
  --band: #0A3A8C; --band-ink: #FFFFFF; --band-muted: #C9D6F2;
  --tag: #FFD100; --tag-ink: #0A2A66; --figure: #0A3A8C;
  --btn: #0A3A8C; --btn-ink: #FFFFFF;
  --crest-bg: #FFD100; --crest-ink: #0A2A66;
  --win: #0A3A8C; --win-ink: #FFFFFF; --draw: #FFE873; --draw-ink: #0A2A66;
  --photo: #12306E; --card: #FFFFFF;
}
:root[data-club="on"][data-theme="dim"] {
  --accent: #FFD100; --accent-text: #FFD84D; --on-accent: #0A2A66;
  --band: #12306E; --band-ink: #FFFFFF; --band-muted: #C9D6F2;
  --tag: #FFD100; --tag-ink: #0A2A66; --figure: #FFD84D;
  --btn: #FFD100; --btn-ink: #0A2A66;
  --crest-bg: #FFD100; --crest-ink: #0A2A66;
  --win: #FFD100; --win-ink: #0A2A66; --draw: #3F4A63; --draw-ink: #E8EAED;
  --photo: #0E2A63; --card: #2A2F37;
}
:root[data-club="on"][data-theme="dark"] {
  --accent: #FFD100; --accent-text: #FFD84D; --on-accent: #0A2A66;
  --band: #0E2A63; --band-ink: #FFFFFF; --band-muted: #C9D6F2;
  --tag: #FFD100; --tag-ink: #0A2A66; --figure: #FFD84D;
  --btn: #FFD100; --btn-ink: #0A2A66;
  --crest-bg: #FFD100; --crest-ink: #0A2A66;
  --win: #FFD100; --win-ink: #0A2A66; --draw: #2B3550; --draw-ink: #F2F2F3;
  --photo: #0E2A63; --card: #131315;
}

/* Dunne outline die de vorm van een clubschild volgt (alleen op Home). */
:root { --crest-outline: drop-shadow(1px 0 0 rgb(0 0 0 / .18)) drop-shadow(-1px 0 0 rgb(0 0 0 / .18)) drop-shadow(0 1px 0 rgb(0 0 0 / .18)) drop-shadow(0 -1px 0 rgb(0 0 0 / .18)); }
:root[data-theme="dim"], :root[data-theme="dark"] { --crest-outline: drop-shadow(1px 0 0 rgb(255 255 255 / .35)) drop-shadow(-1px 0 0 rgb(255 255 255 / .35)) drop-shadow(0 1px 0 rgb(255 255 255 / .35)) drop-shadow(0 -1px 0 rgb(255 255 255 / .35)); }

/* ==========================================================================
   Typografie — één schaal. Nieuwe schermen gebruiken alleen deze waarden.
   micro: labels in kaders (tags, badges, vormblokjes). Grafische glyphs in
   kleine cirkels (wapen-initialen) vallen erbuiten.
   ========================================================================== */
:root {
  --fs-micro: 10px;
  --fs-xs: 11px;    /* mono-kopjes, kolomnamen */
  --fs-sm: 12px;    /* grijze uitleg, subregels */
  --fs-md: 13px;    /* tabellen, lijsten */
  --fs-base: 14px;  /* lopende tekst */
  --fs-lg: 16px;    /* nadruk in een blok, tooltips */
  --fs-title: 20px; /* bloktitels, sheets */
  --fs-xl: 26px;    /* grote koppen in kaarten */
  --mono-scale: 0.92; /* mono oogt groter dan sans bij dezelfde maat */
}
@media (min-width: 1100px) {
  :root { --fs-md: 14px; --fs-base: 15px; }
}