/* Rosenthal Sportswear — the only file with raw colours and font names.
   Skins in css/skins/<name>.css override the palette + type blocks (?skin=<name>). */
:root {
  /* palette (RGB triplets so any token can take alpha) */
  --ink-rgb: 10 15 28;          /* deep navy-black ground (flex) */
  --panel-rgb: 18 27 47;        /* raised navy panels */
  --line-rgb: 36 49 79;         /* hairlines on dark */
  --chrome-rgb: 233 237 243;    /* silver-white text (logo wordmark) */
  --mut-rgb: 154 166 189;       /* secondary text on dark */
  --accent-rgb: 225 27 43;      /* logo red */
  --accent-d-rgb: 181 18 31;    /* red on light surfaces (>= 4.5:1 on chalk) */
  --chalk-rgb: 238 241 246;     /* light chapters */
  --chalk-ink-rgb: 14 22 40;    /* text on chalk */
  --chalk-mut-rgb: 72 84 108;   /* secondary text on chalk */
  --ok-rgb: 38 194 110;         /* MOQ met */
  --shadow-rgb: 0 0 0;          /* drop shadows */

  /* shader / canvas colours (#rrggbb, read by scripts) */
  --gl-bg: #0a0f1c;
  --gl-floor: #0d1424;
  --gl-accent: #e11b2b;
  --gl-dots: #c9d2e3;
  --gl-ghost: #9fb4d8;
  --gl-pool: #a0b4dc;
  --gl-shadow: #000000;
  --gl-text: #f2f4f8;

  /* type */
  --fd: "Saira", "Arial Narrow", "Helvetica Neue", sans-serif;
  --fd-stretch: 76%;
  --fb: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fm: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fk: "Saira", "Arial Narrow", sans-serif;   /* kit lettering drawn on the 3D jersey */

  /* shape + layout */
  --cut: -18deg;                /* the logo's slash angle: wipes, chips, buttons */
  --cut-x: 14px;                /* chamfer offset on buttons and tags */
  --gut: clamp(16px, 3.4vw, 56px);
  --hdr: 76px;
  --max: 1440px;

  /* semantic layer (components use these only) */
  --bg: rgb(var(--ink-rgb));
  --fg: rgb(var(--chrome-rgb));
  --mut: rgb(var(--mut-rgb));
  --line: rgb(var(--line-rgb));
  --card: rgb(var(--panel-rgb));
  --acc: rgb(var(--accent-rgb));
  --acc-text: rgb(var(--accent-rgb));
  --ok: rgb(var(--ok-rgb));
}
[data-theme="light"] {
  --bg: rgb(var(--chalk-rgb));
  --fg: rgb(var(--chalk-ink-rgb));
  --mut: rgb(var(--chalk-mut-rgb));
  --line: rgb(var(--chalk-ink-rgb) / .14);
  --card: rgb(255 255 255 / .7);
  --acc-text: rgb(var(--accent-d-rgb));
}