/* Adovia design tokens — the whole palette, in one place.
 *
 * Until this file existed the site had no stylesheet at all: every colour was
 * a literal typed into a style="" attribute or an SVG fill, 2885 of them
 * across 22 files. That is survivable for one theme and impossible for two —
 * a light mode meant 2885 edits, so the answer to "can we have light mode"
 * was effectively no. This file is what makes it a per-token question instead.
 *
 * WHY EACH COLOUR IS A TRIPLET, NOT A HEX
 *
 * The palette is not 139 colours. It is thirteen, used at 100-odd different
 * alphas: #E2E8F0 alone appears at 29 distinct opacities, as secondary text at
 * 0.65 and as a hairline border at 0.08. Storing "226 232 240" rather than
 * "#E2E8F0" means one token serves every one of those, and a theme flip moves
 * all 29 together:
 *
 *     color: var(--ink);                 the solid form
 *     color: rgb(var(--ink-rgb) / 0.65); any alpha
 *
 * The solid aliases below are defined in terms of the triplets, so there is
 * still exactly one source of truth per colour. Override the triplet and the
 * alias follows — custom properties resolve at computed-value time, so this
 * indirection costs nothing and cannot drift.
 *
 * WHY THIS IS A FILE AND NOT A <style> IN <helmet>
 *
 * <helmet> is injected after the DC runtime boots. Anything in it flashes.
 * Every colour on the site now depends on these tokens, so they have to be
 * resolved before first paint — hence a real stylesheet, linked from the
 * static <head> of all twelve pages, ahead of support.js. If this file 404s
 * the site renders black-on-black, which is why verify-site.py check 1
 * resolves the href and check 7 keeps the literals from creeping back.
 *
 * WHICH TOKENS INVERT
 *
 * Marked below. The ground/ink families are the theme; the accent family is
 * the brand and stays put — orange is orange on white too. --shadow and
 * --on-accent are fixed for the same reason: a shadow is black in any theme,
 * and the label on an orange button is white in any theme.
 */

:root {
  /* --- ground: the page and the things stacked on it. INVERTS. --------- */
  --ground-rgb: 14 21 36;        /* #0E1524  page background            */
  --band-rgb: 18 27 46;          /* #121B2E  alternating section band   */
  --surface-rgb: 24 35 55;       /* #182337  cards, panels, inputs      */
  --footer-rgb: 10 16 28;        /* #0A101C  footer, deepest surface    */

  /* --- ink: everything written on the ground. INVERTS. ----------------- */
  --text-rgb: 242 246 251;       /* #F2F6FB  primary text               */
  --ink-rgb: 226 232 240;        /* #E2E8F0  secondary text + hairlines,
                                              almost always at low alpha  */
  --muted-rgb: 124 140 166;      /* #7C8CA6  captions, labels, meta     */

  /* --- accent: the brand. DOES NOT INVERT. ---------------------------- */
  --accent-rgb: 223 125 51;      /* #DF7D33  links, rules, highlights   */
  --accent-hi-rgb: 230 138 56;   /* #E68A38  CTA gradient, light end    */
  --accent-lo-rgb: 216 113 47;   /* #D8712F  CTA gradient, dark end     */
  --accent-deep-rgb: 138 74 34;  /* #8A4A22  warm shadow under accent,
                                              only ever used at alpha     */

  /* --- fixed: same in every theme. ------------------------------------ */
  --shadow-rgb: 0 0 0;           /* #000000  drop shadows               */
  --on-accent-rgb: 255 255 255;  /* #FFFFFF  text/marks on top of accent */

  /* --- solid aliases. Derived, never edit these directly. -------------- */
  --ground: rgb(var(--ground-rgb));
  --band: rgb(var(--band-rgb));
  --surface: rgb(var(--surface-rgb));
  --footer: rgb(var(--footer-rgb));
  --text: rgb(var(--text-rgb));
  --ink: rgb(var(--ink-rgb));
  --muted: rgb(var(--muted-rgb));
  --accent: rgb(var(--accent-rgb));
  --accent-hi: rgb(var(--accent-hi-rgb));
  --accent-lo: rgb(var(--accent-lo-rgb));
  --accent-deep: rgb(var(--accent-deep-rgb));
  --shadow: rgb(var(--shadow-rgb));
  --on-accent: rgb(var(--on-accent-rgb));
}
