/* The design tokens, pasted from DESIGN.md, which is the source of truth.
 *
 * The same set lives in `android/.../Theme.kt` and inline in the gateway's
 * deletion page. There is no generator — a build step to synchronise nine
 * colours is more machinery than the problem deserves. What replaces it is
 * a rule: change DESIGN.md first, then all three places, in one commit.
 *
 * A colour that is not in DESIGN.md's table does not exist.
 *
 * Each colour is written once, as `light-dark(light, dark)`, and which half
 * is used follows `color-scheme` — the system's by default, and the
 * reader's when the header's switch has set `data-theme`. That is the
 * whole of the theme switch on the CSS side: two lines at the bottom, and
 * no second copy of the palette to keep in step. */

:root {
  color-scheme: light dark;

  --aqua:        #00A9A5;   /* fill only — never text on light */
  --aqua-deep:   #00726F;   /* readable aqua on light */
  --aqua-bright: #3ED6D2;   /* readable aqua on dark */
  --accent:      light-dark(var(--aqua-deep), var(--aqua-bright));

  --bg:      light-dark(#ffffff, #0b0f10);
  --fg:      light-dark(#11181c, #e6edef);
  --dim:     light-dark(#5a6b72, #9aaab0);
  --tank:    light-dark(#edf1f2, #192124);
  --line:    light-dark(#e3e8ea, #22292c);
  --on-aqua: light-dark(#ffffff, #00201f);

  --mark-ground: #101418;   /* favicon, og:image — never a page background */

  /* The glass highlight: where light catches the tank. Not a tenth
   * colour — the page's own ground on light, and the text colour thinned
   * to a third on dark, where a highlight has to be lighter than what it
   * sits on. Drawn as hairlines only, never as a wash. */
  --glass: light-dark(var(--bg), color-mix(in srgb, var(--fg) 35%, transparent));

  --measure: 44rem;
  --radius:  12px;
  --pill:    999px;

  --step-1: .25rem;  --step-2: .5rem;   --step-3: .75rem;
  --step-4: 1rem;    --step-6: 1.5rem;  --step-8: 2rem;
  --step-12: 3rem;   --step-16: 4rem;

  --font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* The reader's choice, when there is one. Set before first paint by the
 * script in base.html, from localStorage; absent, the system decides. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }