/* ===============================================================================
   LIVING BRAND · COLORS-LIGHT.CSS
   ===============================================================================
   The canonical light-theme color palette — one half of a swappable pair with
   colors-dark.css. Extracted 2026-09-11 after finding it duplicated byte-for-
   byte (or near enough to be accidental drift) across ~26 living-styleguide-
   *.html pages.

   THE CONTRACT: this file and colors-dark.css declare the EXACT SAME set of
   token names — every name here has a counterpart there, same name, different
   value. No page CSS may ever assume a name is present or absent; a name
   either exists (with whatever value the currently-linked file gives it) or
   it doesn't exist in the system at all. Swapping which file is linked must
   never change which names resolve — see living-styleguide-typography.html's
   2026-09-11 bug for what happens when that contract is violated (a
   var(--x, fallback) that depended on --x being undefined).

   That's what makes a page's HTML immune to a color-file swap, the way CSS
   Zen Garden made markup immune to a full stylesheet swap: the class names
   here (.mast, .el, .field, .vrow…) describe ROLE, never appearance, so any
   file that fills in this same set of names produces a fully re-skinned page
   with zero HTML changes.

   NOT included here on purpose: the token-defining pages. living-styleguide-
   layout.html (spacing scale), living-styleguide-motion.html (durations),
   living-styleguide-states.html and living-styleguide-color-semantics.html
   (this semantic pass/fail/warn/focus layer, documented in prose there) each
   keep their own local :root — this file's job is to stop accidental
   duplication, not to relocate the one page where a token family gets
   introduced and explained.

   A page that needs a color not listed here (a one-off accent used by exactly
   one page's illustration, like --stamp-red or --pencil) keeps that token
   declared locally in its own <style> block, after linking this file — those
   are page-unique, not part of the swappable contract.

   NAMING NOTE: --fail/--fail-ink is the canonical name for the semantic
   failure/error red. An earlier session built several pages using --wrong/
   --wrong-ink for the identical value — those were renamed to --fail on
   2026-09-11 rather than kept as a second name for the same color. Likewise
   --g-ink (a "guide chrome text color" that always held the same hex as
   --ink) was eliminated in favor of --ink everywhere.
=================================================================================== */
:root{
  /* neutrals */
  --paper:#FBFAF7;--surface:#FFFFFF;--surface-2:#20232A;--ink:#1C1E22;--ink-soft:#4A4E56;--line:#E6E3DA;

  /* the vibrant eight */
  --teal:#0FB5A6;--teal-ink:#0B8378;
  --pink:#F5568F;--pink-ink:#C93368;
  --yellow:#FFC933;--yellow-ink:#8F6B08;
  --coral:#FF7A45;--coral-ink:#C4531F;
  --violet:#8B5CF6;--violet-ink:#6D3EE0;
  --green:#5CB84E;--green-ink:#347A2B;
  --magenta:#EE4FD3;--magenta-ink:#B31999;
  --blue:#428DF0;--blue-ink:#0F5ABD;
  --indigo:#4F46E5;

  /* semantic / UI-feedback layer — documented in living-styleguide-color-semantics.html and living-styleguide-states.html */
  --pass:#2FA84F;--pass-ink:#1F7D3A;
  --fail:#E5484D;--fail-ink:#C4342F;
  --warn:#E8A317;--warn-ink:#8F6B08;
  --focus:#4F46E5;

  /* guide chrome — the styleguide page's own UI (mast eyebrow, spec column, notes), not brand color */
  --g-bg:#F4F2EC;--g-panel:#FFFFFF;--g-line:#E6E3DA;--g-soft:#6A6E77;
}