/* ============================================================================
   tokens/palette.css: the website's colours, declared once.

   Generated by DESIGN-SYSTEM (Claude Design-Space/DESIGN-SYSTEM, GitLab
   design-system/core) from the product's values: scovr-com for scovr.com,
   amvlet-com for amvlet.com. Never edit it by hand: change a colour on the
   Design page in SCOVR-APP (Foundations, Colour, the website's name) and
   press Save, or change it in DESIGN-SYSTEM and run
   node scripts/sync-products.mjs.

   Every page links this file before its own styles and declares none of
   these colours itself. A page that needs another value for one of them
   declares only that one, in its own style sheet after the link, and
   DESIGN-SYSTEM's product file lists the page under "own". Light mode is
   [data-theme="light"] on the html element. The names are the app's
   (ADR-0010), except --accent, the websites' name for gold.
   ========================================================================= */

:root {
  /* Surfaces: the greys, from the deepest up. */
  --bg5: #0C0C0C; /* the end of a gradient, below everything */
  --bg3: #0D0D0D; /* the deepest ground */
  --bg2: #111111; /* raised ground: the footer, a band */
  --bg4: #121212; /* a band between bg2 and the page */
  --bg: #111111; /* the page ground */
  --mid: #1E1E1E; /* a card, a control at rest */
  --etoupe: #222222; /* a raised button or card */

  /* Text: measured against the page ground. */
  --fg: #F0F0F0; /* text */
  --muted: #8A8A8A; /* secondary text, the app's grey */
  --muted2: #707070; /* large text only */
  --muted3: #606060; /* the faintest text: a footnote */
  --faint: #4A4A4A; /* lines and decoration, never text (ADR-0010) */

  /* Lines */
  --border: #2E2E2E; /* the hairline */
  --border2: #3A3A3A; /* the stronger line */

  /* Signals */
  --accent: #C59972; /* gold: a highlight, a verified alias */
  --green: #00BA77; /* verified, live or go */
  --red: #FF4D4D; /* errors, removals */
}

[data-theme="light"] {
  --bg5: #EDEDEA;
  --bg3: #F0F0EE;
  --bg2: #F7F7F5;
  --bg4: #F7F7F5;
  --bg: #FFFFFF;
  --mid: #F0F0EE;
  --etoupe: #F0F0EE;
  --fg: #16181A;
  --muted: #5E6266;
  --muted2: #74787D;
  --muted3: #70747A;
  --faint: #5E6266;
  --border: #D2D2CE;
  --border2: #D2D2CE;
  --accent: #C59972; /* gold stays gold on white */
  --accent-hi: #8A6440; /* the gold that reads on white, where a page needs it */
  --red: #C9302C;
}