/* ═══════════════════════════════════════════════════════════════════════
   VWIO Design Tokens — shared color palette, spacing, type and breakpoint
   scale for every surface under /vwio/.

   CH-2026-0811-LINK-DESIGNSYS-001 phase 1. Created because 13 surfaces
   were independently DECLARING (not importing) the same navy/gold/olive
   values, and --border with them. One store for these facts; surfaces
   read it, none re-declares it.

   Load before layout.css and before any page-local <style>:
     <link rel="stylesheet" href="/vwio/_shared/tokens.css?v=20260811a">

   Cache doctrine (CH-2026-0810-LINK-CACHE-001): this file lives under
   /vwio/_shared/, which _headers already scopes to must-revalidate.
   Bump the ?v= on every edit anyway — belt and suspenders, per doctrine.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Platform canon ──────────────────────────────────────────────────
     Verified 2026-08-11 byte-for-byte against /vwio/register/'s :root
     (the surface grader's own prior comment already cited as the
     source) — all nine values agree exactly. Also matches checkin,
     dashboard, pairings, portal and ping unchanged. */
  --navy:       #0a1628;
  --navy-light: #132240;
  --olive:      #5d7a3a;
  --olive-light:#6e8f45;
  --gold:       #c9a227;
  --gold-light: #d4b440;
  --white:      #f8f7f4;
  --gray:       #8a9bb5;
  --error:      #c94040;

  /* ── KNOWN FORKS — do not "fix" by picking a winner in this file ──────
     Re-verified directly against every surface's :root while building
     this file (2026-08-11). These are not the same fact stored twice —
     they are two ACTUAL different colors already live in production.
     Reconciling which one wins is a phase-2 decision with its own
     visual sign-off, not a side effect of a lift-and-share pass:

       --gold-light   #d4b440 on 7 surfaces (register, checkin, grader,
                      dashboard, pairings, portal, ping — the value
                      exported above, so grader's adoption is a no-op)
                      #e0be4a on 9 surfaces (crm, comms, donations, ops,
                      staff, sponsors, scorecards, scorecards/entry, and
                      the root Command Center index.html)
       --olive-light  same two families, same split (#6e8f45 / #7a9e4e)
       --border       #1e3454 on 13 surfaces — NOT exported below,
                      because grader (this phase's pilot) is the one
                      surface that does NOT use it: grader's own
                      --border is #24365c (see grader/index.html
                      :root). Exporting #1e3454 here would be a real,
                      visible change to the pilot on adoption; exporting
                      grader's #24365c would misrepresent an outlier as
                      "the" canon. Left out until that's a deliberate
                      choice. Full per-file counts are in the WRIGHT
                      report attached to this ticket. */

  /* ── Spacing scale ────────────────────────────────────────────────────
     Not measured with the same rigor as colors/breakpoints — body.evidence
     doesn't cite spacing duplication, and grader (like every surface)
     still uses ad hoc padding/gap numbers rather than a scale. These six
     stops are grounded in grader's own most-repeated values (4/8/12/16
     appear exactly and often; 24/32 extend the same 4px progression for
     the larger gaps used elsewhere on the platform). Phase 1 does not
     retrofit grader's existing rules to consume these — only the two new
     layout.css primitives use them. Treat this as a proposed starting
     point for phase 2, not a description of what's already adopted. */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;

  /* ── Type scale ───────────────────────────────────────────────────────
     Same caveat as spacing, more so: grader alone uses eighteen distinct
     font-size values from .45rem to 1.3rem with no scale behind them
     today. This is a proposed compression to six stops, not a claim that
     grader already uses it — nothing in grader's existing rules was
     changed to consume these in phase 1.

     Phase-2 caution: rem is relative to the PAGE's own html{font-size},
     and that root size itself varies platform-wide (14/15/16/17px roots
     all exist today — grader is 17px). A shared type scale in rem does
     NOT by itself make two surfaces render the same absolute size until
     the root size also converges; that is a separate, larger decision. */
  --text-xs:  .7rem;
  --text-sm:  .8rem;
  --text-base:.9rem;
  --text-md:  1rem;
  --text-lg:  1.1rem;
  --text-xl:  1.3rem;

  /* ── Breakpoint scale ─────────────────────────────────────────────────
     CSS custom properties cannot appear inside an @media condition — no
     shipping browser supports var() in a media feature — so these four
     exist for documentation and for calc()/JS use outside a media block.
     Every actual @media rule must still spell out the literal pixel
     number; when you add one, use one of these four and do not introduce
     a fifth without updating this comment and re-measuring.

     Justification (measured 2026-08-11 directly against every @media
     (min|max-width) condition under /vwio/ — 46 rule-occurrences across
     15 distinct pixel values; full per-file table in the WRIGHT report
     on this ticket. NOTE: this ticket's own body.evidence lists 16 values
     — not the 17 it claims — and includes 1080px, which this survey did
     not find anywhere in the current tree, committed or working copy):

       --bp-sm 600px  — the single most-repeated value in the 480-600
                        phone cluster (600 ×4: grader, dashboard, ping,
                        pairings) and the pilot's own first breakpoint.
                        Absorbs 480/520/540/560 (8 rules) in phase 2.
       --bp-md 768px  — the platform's dominant breakpoint by a wide
                        margin: 768 alone is used 11 times, and its
                        max-width pair 767 six more — 17 of the 46
                        measured rules already agree on this ONE number.
                        Absorbs 640/720/800/820 (7 rules) in phase 2.
       --bp-lg 900px  — the grid/column-count threshold: matches the
                        pilot's own 2-column grid trigger AND the root
                        Command Center's chart-grid/forecast-hero
                        collapse (900 ×3, the largest value in this
                        cluster). Absorbs 960/1000 (6 rules — mostly
                        /vwio/manual/'s sidebar toggle, a different UI
                        pattern from a column-count change) in phase 2.
       --bp-xl 1100px — content-width cap: matches the pilot's own
                        max-width:1100px container AND /vwio/sla/'s
                        independently-chosen identical cap — two
                        unrelated surfaces converged on the same number
                        without coordinating. Reused directly (not
                        re-declared) by layout.css's .vwio-container.

     NOT absorbed by this scale: grader's own @media(max-width:480px)
     popover-position fix is a one-off placement correction, not a
     layout breakpoint, and stays local to grader/index.html. */
  --bp-sm:600px;
  --bp-md:768px;
  --bp-lg:900px;
  --bp-xl:1100px;
}