/* The Civic Tech Field Guide design system, for its collaboration site.
 *
 * The light values are CTFG's, read from Civic-Tech-Field-Guide/ctfg-website
 * frontend/src/app/globals.css on 2026-10-14 (violet #574FD9 on ink #19191E,
 * page #FBFBFB). The dark values and the two derived line colours are this
 * file's own, and say so. Theme changes go here and nowhere else: the layout
 * (site/site.css, site/band.css) reads only these names.
 *
 * ⚠️ Every token defined for light must be defined for BOTH dark selectors. The
 * gate enforces this.
 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Geist+Mono:wght@400&family=Geist:wght@400;500;600;700&display=swap');

/* ⚠️ The site pins itself to LIGHT via <html data-theme="light">, so the dark
   palette below is defined and not currently used. It stays because the parity
   rule stays: the day somebody removes the pin, every token must already have a
   dark value, and a palette half-written is how four ops pages ended up with an
   unreadable callout for a month. */
:root {
  color-scheme: light;

  /* CTFG, light */
  --background: #fbfbfb;
  --foreground: #19191e;
  --card: #ffffff;
  --card-foreground: #19191e;
  --popover: #ffffff;
  --primary: #574fd9;
  --primary-foreground: #ffffff;
  --secondary: #f1f1f1;
  --secondary-foreground: #19191e;
  --muted: #f1f1f1;
  --muted-foreground: #6b6b68;
  --accent: #f1f0ff;
  --accent-foreground: #1f1a73;
  --gold: #ffbb48;
  --colophon: #f1f0ff;
  --destructive: #e40014;
  --border: #e4e4e1;
  --input: #d6d6d2;
  --ring: #877dff;
  --success: #76c7cc;
  --warning: #ffd294;
  --error: #ff847d;
  --sidebar: #f1f1f1;
  --sidebar-border: #e4e4e1;

  /* Derived here, not taken from the CTFG system: --success and --warning are
     surface tints in that system and invert between modes, so neither works as
     a line or as text. These two carry the contrast a rule and a label need. */
  --success-line: #2f7d7f;
  --warning-line: #9a6a12;

  /* A shadow is a colour too, and a black one is invisible on a dark
     background — which is exactly the mistake the parity rule exists to catch. */
  --shadow-card: 0 1px 2px rgb(60 40 30 / .05), 0 8px 24px rgb(60 40 30 / .07);

  /* Structural */
  --radius: 0.625rem;
  --measure: 36rem;
  --font-sans: Geist, ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-serif: Fraunces, ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --background: #121216;
    --foreground: #f1f1f1;
    --card: #1b1b21;
    --card-foreground: #f1f1f1;
    --popover: #121216;
    --primary: #b1acff;
    --primary-foreground: #1f1a73;
    --secondary: #26262d;
    --secondary-foreground: #f1f1f1;
    --muted: #26262d;
    --muted-foreground: #a3a3a8;
    --accent: #2a2660;
    --accent-foreground: #f1f0ff;
    --gold: #ffbb48;
    --colophon: #2a2660;
    --destructive: #82181a;
    --border: #33333b;
    --input: #3d3d46;
    --ring: #877dff;
    --success: #003033;
    --warning: #543200;
    --error: #843c38;
    --sidebar: #18181d;
    --sidebar-border: #2b2b33;
    --success-line: #76c7cc;
    --warning-line: #ffbb48;
    --shadow-card: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .45);
  }
}

:root[data-theme="dark"] {
  --background: #121216;
  --foreground: #f1f1f1;
  --card: #1b1b21;
  --card-foreground: #f1f1f1;
  --popover: #121216;
  --primary: #b1acff;
  --primary-foreground: #1f1a73;
  --secondary: #26262d;
  --secondary-foreground: #f1f1f1;
  --muted: #26262d;
  --muted-foreground: #a3a3a8;
  --accent: #2a2660;
  --accent-foreground: #f1f0ff;
  --gold: #ffbb48;
  --colophon: #2a2660;
  --destructive: #82181a;
  --border: #33333b;
  --input: #3d3d46;
  --ring: #877dff;
  --success: #003033;
  --warning: #543200;
  --error: #843c38;
  --sidebar: #18181d;
  --sidebar-border: #2b2b33;
  --success-line: #76c7cc;
  --warning-line: #ffbb48;
  --shadow-card: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .45);
}