/*
 * Design tokens. The only place where colours, fonts and layout sizes are defined.
 * Dark is the default look. Light is selected by <html data-theme="light"> (set by js/core/boot.js)
 * or, when no data-theme is set at all, by the viewer's prefers-color-scheme.
 * Components must use these variables and never a literal colour.
 */
:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #08040f;
  --bg-rgb: 8, 4, 15;
  --bg2: #100626;
  --bg3: #1c0847;
  --outer: #05030a;
  --home-gradient-start: #b383e8;
  --home-gradient-end: #f5b8ef;
  --home-gradient-veil: .5;

  /* constants (same in every theme) */
  --white: #fff;
  --white-rgb: 255, 255, 255;
  --black-rgb: 0, 0, 0;
  --brand-rgb: 94, 21, 210;

  /* text */
  --ink: #ffffff;
  --ink-rgb: 255, 255, 255;
  --ink-1: rgba(255, 255, 255, 0.72);
  --ink-2: rgba(255, 255, 255, 0.58);
  --ink-3: rgba(255, 255, 255, 0.45);
  --ink-4: rgba(255, 255, 255, 0.35);

  /* brand */
  --brand: #5e15d2;
  --brand-hi: #7326ec;
  --accent2: #8b5cf6;
  --accent-pale: #c7b4ef;

  /* status (used by admin tooling) */
  --ok: #3ecf6e;
  --err: #ff7a70;
  --warn: #fab219;

  /* forecast series in the tokenization chart */
  --fc-bcg: #ff7ab8;
  --fc-citi: #3fd0b4;
  --fc-mck: #f5b544;

  /* images that must adapt to the theme */
  --hero-img-op: 0.3;
  --mark-filter: invert(1) brightness(1.6);
  --logo-color-display: none;
  --logo-white-display: block;
  --logo-tile: #ffffff;

  /* type */
  --font-sans: "Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* layout (cqw = width of .page, see base.css) */
  --maxw: 1280px;
  --pad-x: clamp(20px, 5cqw, 80px);
  --pad-y: clamp(72px, 9cqw, 140px);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #ffffff;
    --bg-rgb: 255, 255, 255;
    --bg2: #f6f3fc;
    --bg3: #ebe2fb;
    --outer: #e4def1;
    --home-gradient-veil: 0;
    --ink: #180a28;
    --ink-rgb: 24, 10, 40;
    --ink-1: #2c2438;
    --ink-2: #463d54;
    --ink-3: #564d63;
    --ink-4: #665d72;
    --accent2: #5e15d2;
    --accent-pale: #4a0fa8;
    --ok: #0a7d33;
    --err: #b3261e;
    --warn: #9a6400;
    --fc-bcg: #c2185b;
    --fc-citi: #0a8a76;
    --fc-mck: #b27200;
    --hero-img-op: 0.2;
    --mark-filter: brightness(0.2);
    --logo-color-display: block;
    --logo-white-display: none;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-rgb: 255, 255, 255;
  --bg2: #f6f3fc;
  --bg3: #ebe2fb;
  --outer: #e4def1;
  --home-gradient-veil: 0;
  --ink: #180a28;
  --ink-rgb: 24, 10, 40;
  --ink-1: #2c2438;
  --ink-2: #463d54;
  --ink-3: #564d63;
  --ink-4: #665d72;
  --accent2: #5e15d2;
  --accent-pale: #4a0fa8;
  --ok: #0a7d33;
  --err: #b3261e;
  --warn: #9a6400;
  --fc-bcg: #c2185b;
  --fc-citi: #0a8a76;
  --fc-mck: #b27200;
  --hero-img-op: 0.2;
  --mark-filter: brightness(0.2);
  --logo-color-display: block;
  --logo-white-display: none;
}

/* Shared flag colors for template-owned headers. */
:root { --flag-en-blue: #012169; --flag-white: #ffffff; --flag-en-red: #C8102E; --flag-cs-red: #D7141A; --flag-cs-blue: #11457E; }