/* The Kit Room brand tokens (approved 2026-10-30: logo C floor plan, fonts from B, colours from E).
   Fonts load from Google Fonts:
   https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,800&family=Atkinson+Hyperlegible:wght@400;700&display=swap */
:root {
  /* palette */
  --kr-black: #141414;   /* crate black: text, logo, buttons */
  --kr-yellow: #FFD400;  /* signal yellow: backgrounds and on-black accents only, never text on light (1.4:1) */
  --kr-concrete: #E7E5E0;/* concrete: borders, tiles */
  --kr-kraft: #B98E5A;   /* kraft: rare warm accent, illustrations; never text (2.8:1 on white) */
  --kr-white: #FAFAF7;   /* page background */
  /* kit colours: each kit owns one; same rule as yellow (background or on black, never text on light) */
  --kit-seo: #C4B5FD;    /* The SEO Kit, lilac: black on it 9.8:1; lilac on white 1.9:1 (never) */
  /* roles, light */
  --bg: var(--kr-white);
  --surface: #FFFFFF;
  --fg: var(--kr-black);
  --muted: #55534E;      /* 7.4:1 on --bg */
  --line: #E1DFD9;
  --tile: #EFEDE8;
  --accent-bg: var(--kr-yellow);
  --on-accent: var(--kr-black);   /* 12.9:1 on yellow */
  --button-bg: var(--kr-black);
  --button-fg: var(--kr-yellow);
  /* platform colours, dashboard only; brand colours never stand in for these */
  --reddit: #C93700;     /* 5.0:1 on white; brighter #FF6A33 in dark mode */
  --linkedin: #0A66C2;
  /* type */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif; /* 800, tracking -0.02em */
  --font-body: "Atkinson Hyperlegible", system-ui, sans-serif;  /* 400 and 700 */
  --radius: 8px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141414; --surface: #1E1E1C; --fg: #FAFAF7; --muted: #A8A69F; --line: #34332F; --tile: #262522;
    --button-bg: var(--kr-yellow); --button-fg: var(--kr-black);
    --reddit: #FF6A33; --linkedin: #5AA7EF; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141414; --surface: #1E1E1C; --fg: #FAFAF7; --muted: #A8A69F; --line: #34332F; --tile: #262522;
  --button-bg: var(--kr-yellow); --button-fg: var(--kr-black);
  --reddit: #FF6A33; --linkedin: #5AA7EF; color-scheme: dark;
}