/* ============================================================
   PlinkExchange — CANONICAL COLOUR PALETTE. Single source of truth.

   Every colour in the site resolves here. Nothing else may declare a
   palette colour: the four other stylesheets that used to carry their
   own :root copies (ranges/styles.css, locker/locker.css,
   maps/canada/styles.css, _astro/faqs.*.css and the vendored
   dev-base.css) now inherit from this file, and the raw hex that was
   scattered across ~7,400 places has been rewritten to var().

   Loaded first on every page, ahead of every other stylesheet.

   ---- WHY THE --*-rgb TOKENS EXIST -------------------------------
   var() cannot carry an alpha channel, and the site uses ~479
   translucent variants of these colours. Each colour that needs one
   therefore also publishes its channels, used as:

       rgb(var(--orange-rgb) / .18)

   Change the hex and the matching -rgb triplet together — they are the
   same colour expressed twice, and nothing keeps them in sync for you.

   ---- KNOWN EXCEPTIONS (cannot reference a CSS variable) ----------
   • <meta name="theme-color" content="#2D363D"> on 4,038 pages — a
     meta tag, not a style.
   • The 12 locker avatar SVGs in /shared/avatars/ — standalone assets
     fetched via <img>, outside the document's cascade.
   • Transactional e-mail HTML in netlify/functions/api.mjs — mail
     clients do not support custom properties.
   • Colour literals inside JS (map fills, chart ramps) and inside
     data: URIs embedded in CSS.
   These are listed so the next person knows the sweep was deliberate
   and where it necessarily stopped.
============================================================ */

:root {
  /* ---- Brand orange -------------------------------------------------
     --orange carries white button text; --orange-deep is the one safe
     for orange TEXT on a light ground (4.89:1 on --paper). Do not swap
     their roles. See the contrast note at the foot of this file. */
  --orange:            #F2540F;
  --orange-rgb:        242 84 15;
  --orange-deep:       #BC400D;
  --orange-deep-rgb:   188 64 13;
  --orange-soft:       #F7A277;
  --orange-soft-rgb:   247 162 119;
  --orange-tint:       #FCE9DA;
  --orange-tint-rgb:   252 233 218;

  /* ---- Darks --------------------------------------------------------- */
  --charcoal:          #2D363D;
  --charcoal-rgb:      45 54 61;
  --charcoal-2:        #1F2528;
  --charcoal-2-rgb:    31 37 40;
  --charcoal-3:        #4A5560;
  --charcoal-3-rgb:    74 85 96;
  --ink:               #21282D;
  --ink-rgb:           33 40 45;
  --muted:             #6E7178;
  --muted-rgb:         110 113 120;

  /* ---- Paper / neutral ramp -----------------------------------------
     Steel: an off-white with a cool blue-grey cast. Hue 212deg,
     saturation ~11%. Replaces first the original warm cream (#F4F1EA,
     which read as default-Claude beige) and then a sage-green attempt
     that came out too earthy. Deliberately cool and slightly lighter
     than either, so it reads as off-white rather than as a colour.
     --paper also serves as the light TEXT colour on dark sections.
     NB: the same values are mirrored by hand in the avatar SVGs and the
     e-mail template — see the exceptions list above. */
  --paper:             #F4F5F6;
  --paper-rgb:         244 245 246;
  --paper-warm:        #EBEDEF;
  --paper-warm-rgb:    235 237 239;
  --paper-deep:        #DFE1E5;
  --paper-deep-rgb:    223 225 229;
  --rule:              #CED2D7;
  --rule-rgb:          206 210 215;
  --rule-2:            #B8BEC4;
  --rule-2-rgb:        184 190 196;

  /* ---- Semantic tiers (legal maps, evidence badges) ------------------- */
  --tier-1:            #B23A1A;
  --tier-1-rgb:        178 58 26;
  --tier-2:            #E07024;
  --tier-2-rgb:        224 112 36;
  --tier-3:            #E5A53C;
  --tier-3-rgb:        229 165 60;
  --tier-4:            #5A8F3A;
  --tier-4-rgb:        90 143 58;
  --rank-2:            #A8B73A;
  --rank-2-rgb:        168 183 58;

  /* ---- Landscape accents --------------------------------------------- */
  --topo-sage:         #5A8F3A;
  --topo-sage-rgb:     90 143 58;
  --topo-sage-deep:    #3A6225;
  --topo-sage-deep-rgb:58 98 37;
  --range-tan:         #C9B68A;
  --range-tan-rgb:     201 182 138;
  --range-tan-deep:    #A8956F;
  --range-tan-deep-rgb:168 149 111;

  /* ---- Composites built from the above -------------------------------- */
  --shadow-sm: 0 1px 0 rgb(var(--charcoal-rgb) / .06);
  --shadow-md: 0 4px 24px -10px rgb(var(--charcoal-rgb) / .18), 0 1px 3px rgb(var(--charcoal-rgb) / .06);
  --shadow-lg: 0 16px 48px -16px rgb(var(--charcoal-rgb) / .22), 0 2px 6px rgb(var(--charcoal-rgb) / .08);
  --shadow-xl: 0 28px 60px -22px rgb(var(--charcoal-rgb) / .28), 0 4px 10px rgb(var(--charcoal-rgb) / .1);
  --focus-ring: 0 0 0 4px rgb(var(--orange-rgb) / .18);
}

/* ============================================================
   CONTRAST, measured against --paper (#F4F5F6). WCAG AA is 4.5:1 for
   normal text, 3:1 for large (>=18.66px bold / >=24px).

     --ink            13.68:1   pass
     --charcoal       11.27:1   pass
     --charcoal-3      6.97:1   pass
     --orange-deep     4.96:1   pass   (was 4.34 and FAILING on the old beige)
     --muted           4.48:1   marginal fail — pre-existing, 0.02 short
     --orange          3.18:1   decorative / large only, never body text

   KNOWN GAP, unchanged by this pass: .btn-primary sets white text on
   --orange, which measures 3.47:1. That clears AA for large text but
   the button label is 13.5px, so it is normal text and needs 4.5:1.
   No bright orange can satisfy that — every orange reaching 4.5:1 with
   white is a dark rust (L<=44%). Fixing it means either using
   --orange-deep as the button fill (5.42:1 with white) or enlarging the
   label. Both change how the site looks, so neither was done here.
============================================================ */