/* web/theme.css — THE PALETTES, AND NOTHING ELSE (M6).
 *
 * The client's styling is typed CSS in web/src/Main.elm (rtfeldman/elm-css):
 * every layout, spacing, typography and mark rule is a `Css.Style` value on the
 * element it styles, so a rule cannot name an element the view does not render
 * — the bug that made this slice necessary, when a stylesheet selected `#app`
 * and Elm rendered `<div class="app">`.
 *
 * ONE THING CANNOT BE TYPED, and it is not an oversight: the theme switch is
 * `data-theme="light|dark"` on <html>, written by index.html's pre-boot script
 * BEFORE the first paint (and by the header toggle afterwards). elm-css has no
 * way to express "respond to an attribute on the root" — its media queries are
 * @media, not selectors — so the palettes stay here, as the only stylesheet.
 *
 * WHAT IS ALLOWED IN THIS FILE: the two custom-property blocks, on exactly the
 * two selectors below, and `color-scheme` inside them (UA scrollbars and form
 * controls have to follow the same attribute, and it must move with the same
 * switch, so it belongs in the same block). No layout, no colour literals
 * outside the palette, no selector that could fail to match anything.
 *
 * The dark values are the bare `:root` default, so a page that never ran the
 * script is still a legible page; the light block is a higher-specificity
 * selector, so an explicit choice beats it.
 *
 * THE LITERALS: `--on-accent` is ink-on-a-filled-accent (the submit button, the
 * open trail chip, "migrate all") and it INVERTS between palettes — near-black
 * on the dark theme's gold, near-white on the light theme's darker gold.
 * `--accent-wash` / `--accent-ghost` are the two accent tints (is-on / is-current
 * vs hover) and `--danger-wash` the armed-drop tint: they were hard-coded rgba()
 * values tuned against the dark background, which on cream paper would have been
 * invisible, so they are tokens now. `--scrim` is the help overlay's backdrop —
 * the page colour at 95%, because a fixed rgba() grey would not sit on both
 * papers.
 */

:root {
  color-scheme: dark;

  --bg: #12130f;
  --paper: #1b1c17;
  --ink: #e8e6dc;
  --dim: #9a988c;
  --rule: #33352c;
  --shadow: rgba(0, 0, 0, .55);
  --accent: #c8a24a;
  --done: #6f8f5f;
  --error: #d06a5a;

  --on-accent: #14150f;
  --accent-wash: rgba(200, 162, 74, .1);
  --accent-ghost: rgba(200, 162, 74, .05);
  --danger-wash: rgba(208, 106, 90, .12);
  --scrim: rgba(18, 19, 15, .95);
}

/* The same names, on paper. The accent had to go DARKER (#c8a24a is 2.2:1 on
   cream — a highlighter, not text), the green and red likewise; the gold still
   reads as gold at #7d5e0e, and the three semantic colours stay mutually
   distinguishable (the measured ratios are in web/probe/theme_probe.js, which
   is the gate). */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f7f4ea;
  --paper: #fffdf6;
  --ink: #23241d;
  --dim: #666557;
  --rule: #cbc6b4;
  --shadow: rgba(35, 36, 29, .16);
  --accent: #7d5e0e;
  --done: #3f6136;
  --error: #a83327;

  --on-accent: #fffdf6;
  --accent-wash: rgba(125, 94, 14, .13);
  --accent-ghost: rgba(125, 94, 14, .1);
  --danger-wash: rgba(168, 51, 39, .1);
  --scrim: rgba(247, 244, 234, .96);
}