/* OpenHelvetia design tokens — single source for all drafts and, later,
 * the styled site (A2 design package, 19.08.2026).
 *
 * Palette derived from the opendata.swiss colour family (verified from
 * live CSS, 19.08.2026) — COLOUR FAMILY AND UI PATTERNS ONLY: no Swiss
 * cross, no Confederation logo block, no federal footer imitation.
 *
 * Contrast facts (WCAG relative luminance, measured 19.08.2026):
 *   primary #009688  on white 3.67:1 · on tint 3.03:1
 *     -> accents, large text (>=24px/19px bold) and UI elements ONLY;
 *        never normal body text, never text links.
 *   dark-1  #00635a  on white 7.16:1 · on tint 5.91:1  -> text links
 *   dark-2  #004a43  on white 10.19:1                  -> link hover
 *   dark-3  #003f39  on white 11.86:1                  -> deep surfaces
 *   ink     #242424  on white 15.52:1 · on tint 12.81:1
 *   grey    #767676  on white 4.54:1 · on tint 3.75:1
 *     -> secondary text on WHITE only; on tint use ink or dark-1.
 *   line    #d9d9d9  decorative separators only (1.41:1).
 *   amber   #f0ad4e  sparingly; never as text colour on light ground
 *     (1.95:1) — only as a background chip with ink text (7.98:1) or
 *     as a thin decorative marker.
 *   white on primary 3.67:1 -> large text/UI only;
 *   white on dark-1..3 (7.16 / 10.19 / 11.86) -> any text.
 */

:root {
  /* Brand */
  --oh-primary: #009688;
  --oh-dark-1: #00635a;
  --oh-dark-2: #004a43;
  --oh-dark-3: #003f39;
  --oh-tint: #dfeceb;

  /* Neutrals */
  --oh-ink: #242424;
  --oh-grey: #767676;
  --oh-line: #d9d9d9;
  --oh-paper: #ffffff;
  /* Raised neutral surface (chat sidebar, input bar) — warmer than
     paper, cooler than the teal tint; decorative background only. */
  --oh-raised: #f6f6f3;

  /* Signal (sparingly) */
  --oh-amber: #f0ad4e;
  /* Local preview: the file-edge turns bordeaux so a preview tree is
     recognizable at a glance — the public build keeps the teal edge.
     Decorative only, never text. */
  --oh-preview-edge: #8c1c2c;

  /* Semantic assignments (the rules above, encoded) */
  --oh-text: var(--oh-ink);
  --oh-text-secondary: var(--oh-grey); /* on white only */
  --oh-link: var(--oh-dark-1);
  --oh-link-hover: var(--oh-dark-2);
  --oh-accent: var(--oh-primary);      /* large elements/accents only */
  --oh-focus: var(--oh-dark-1);        /* 7.16:1 on white, 5.91:1 on tint */
  --oh-surface-tint: var(--oh-tint);
  --oh-surface-deep: var(--oh-dark-3); /* white text on it: 11.86:1 */

  /* Signal colours the stylesheet has been using through fallbacks
     (`var(--oh-red, #b23)`), which meant the literal was what rendered
     and the dark theme could not reach them. Named here so both
     grounds can. */
  --oh-red: #bb2233;                   /* on white 6.20:1 */
  --oh-blue: #1f5fa8;                  /* the context bound's edge */
}

/* ---------------------------------------------------------------
 * The same roles on a dark ground (31.08.2026).
 *
 * WHY THE BRAND COLOURS INVERT. `--oh-dark-1..3` are not «dark
 * colours»: they are the STRONG role — the colour a link takes and
 * the colour a filled button's ground takes, with `--oh-paper` on
 * top. On a dark ground both of those want a LIGHT teal, and
 * `--oh-paper` — which carries the page's ground AND the foreground
 * that sits on those buttons — wants the near-black. Swapping only
 * the ground would have produced dark teal on near-black buttons with
 * near-black labels: invisible, and invisible in the one place a
 * visitor clicks.
 *
 * Every pair below was MEASURED against this ground, not estimated
 * (WCAG relative luminance):
 *   text     #e8eceb on ground 15.58:1 · on raised 14.03 · on tint 11.81
 *   grey     #a8b2b0 on ground  8.54:1 · on raised  7.69
 *   dark-1   #4fc9b8 on ground  9.17:1 · on tint    6.95  -> text links
 *   dark-2   #7edacd on ground 11.31:1                    -> link hover
 *   paper    #101413 ON dark-1  9.17:1 · ON dark-2 11.31  -> button labels
 *   text     #e8eceb ON surface-deep 16.10:1              -> the footer
 *   primary  #16b5a3 on ground  7.22:1  (large text/UI, as on light)
 *   amber    #f0ad4e on ground  9.54:1
 *   red      #ff8f9a on ground  8.53:1  (the light ground's #bb2233
 *                                        reaches only 3.00 here)
 *   blue     #6fa8e8 on ground  7.46:1
 *   line     #2c3634 on ground  1.49:1  — decorative separators only.
 *
 * The guard is the one the artefact's own contract uses: an explicit
 * choice wins in both directions, and the default «system» setting
 * follows the visitor's.
 * --------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --oh-primary: #16b5a3;
    --oh-dark-1: #4fc9b8;
    --oh-dark-2: #7edacd;
    --oh-dark-3: #35a899;
    --oh-tint: #16302c;

    --oh-ink: #e8eceb;
    --oh-grey: #a8b2b0;
    --oh-line: #2c3634;
    --oh-paper: #101413;
    --oh-raised: #191f1e;

    --oh-amber: #f0ad4e;
    --oh-red: #ff8f9a;
    --oh-blue: #6fa8e8;

    /* «Deep» stays deep: the footer is a darker band than the page,
       and its text is the page's text rather than the paper role,
       which is now the ground. */
    --oh-surface-deep: #0b100f;
  }
}

/* The same palette when the visitor CHOOSES dark, whatever their
   system prefers. Two blocks and not one, because CSS has no way to
   say «these two selectors, those values» across a media query — so
   the pair is held identical by a test (`the_dark_palette_...` in
   site-gen/tests/build.rs) rather than by care. */
:root[data-theme="dark"] {
    --oh-primary: #16b5a3;
    --oh-dark-1: #4fc9b8;
    --oh-dark-2: #7edacd;
    --oh-dark-3: #35a899;
    --oh-tint: #16302c;

    --oh-ink: #e8eceb;
    --oh-grey: #a8b2b0;
    --oh-line: #2c3634;
    --oh-paper: #101413;
    --oh-raised: #191f1e;

    --oh-amber: #f0ad4e;
    --oh-red: #ff8f9a;
    --oh-blue: #6fa8e8;

    /* «Deep» stays deep: the footer is a darker band than the page,
       and its text is the page's text rather than the paper role,
       which is now the ground. */
    --oh-surface-deep: #0b100f;
}