/* ==========================================================================
   SETTINGS · COLOR SEMANTIC — role aliases built on the raw palette. Components
   reference ONLY these, so the whole look re-pitches from this one file. Tints,
   hovers and hairlines are derived from a single source with color-mix(oklab).
   ========================================================================== */

:root {
  /* — Surfaces — */
  --surface:          var(--paper);    /* the page */
  --surface-raised:   var(--leaf);     /* cards, the reading sheet */
  --surface-sunken:   var(--deckle);   /* wells, footer, callouts */
  --surface-input:    var(--quire);    /* the inside of a field */

  /* A solid-ink inverse surface — the primary CTA, the active chip, the skip
     link — tokenised so the inverse block re-pitches from settings too. */
  --surface-inverse:        var(--ink);
  --surface-inverse-hover:  color-mix(in oklab, var(--ink) 88%, var(--rubric));
  --text-inverse:           var(--leaf);

  /* — Text — */
  --text:             var(--ink);
  --text-secondary:   var(--ink-secondary);
  /* 62% keeps muted small text ≥4.5:1 even on the sunken deckle footer */
  --text-muted:       color-mix(in oklab, var(--ink) 62%, var(--paper));
  --text-on-accent:   var(--leaf);     /* type laid over the rubric */

  /* — The sacred spot, and its interaction states — */
  --accent:           var(--rubric);
  --accent-ink:       color-mix(in oklab, var(--rubric) 82%, var(--ink)); /* hover/pressed */
  --accent-wash:      color-mix(in oklab, var(--rubric) 10%, var(--paper));
  --accent-keyline:   color-mix(in oklab, var(--rubric) 38%, var(--paper));

  /* — Rules: the printed hairline and a stronger ledger rule — */
  --rule:             var(--hairline);
  --rule-strong:      color-mix(in oklab, var(--hairline) 55%, var(--ink) 45%);
  --rule-faint:       color-mix(in oklab, var(--hairline) 55%, var(--paper));

  /* — Links: ink with a rubric underline; never blue — */
  --link:             var(--ink);
  --link-underline:   color-mix(in oklab, var(--rubric) 45%, var(--paper));
  --link-hover:       var(--rubric);

  /* — Depth tints (consumed by _shadows.css). In daylight a shadow is ink and
       the letterpress highlight is the pure sheet. These are the ONE part of the
       look that can't auto-flip for dark mode (ink inverts to cream, which would
       turn every drop shadow into a glowing halo), so they're tokenised here and
       re-tinted in _theme-dark.css. — */
  --shadow-tint:      var(--ink);
  --emboss-light:     var(--quire);

  /* — Interaction furniture — */
  --focus:            var(--rubric);
  --focus-halo:       color-mix(in oklab, var(--rubric) 22%, transparent);
  --selection:        color-mix(in oklab, var(--rubric) 18%, var(--paper));
  --highlight:        color-mix(in oklab, var(--ochre) 26%, var(--paper)); /* the <mark> wash */

  /* ----------------------------------------------------------------------
     SCORE BANDS — tokenised as --band-{good,moderate,poor,none}-{fill,line,ink}
     mapping 1:1 onto the score_band() helper (good / moderate / poor / none).
     fill = the ~12% chip wash over paper · line = the full-ink keyline ·
     ink  = the numeral / band-word colour. A badge whispers, never glows.
     ---------------------------------------------------------------------- */
  --band-good-ink:        var(--myrtle);
  --band-good-line:       var(--myrtle);
  --band-good-fill:       color-mix(in oklab, var(--myrtle) 12%, var(--paper));

  /* ink darkens to --ochre-ink for AA-legible text; line/fill keep the hue */
  --band-moderate-ink:    var(--ochre-ink);
  --band-moderate-line:   var(--ochre);
  --band-moderate-fill:   color-mix(in oklab, var(--ochre) 12%, var(--paper));

  --band-poor-ink:        var(--brick);
  --band-poor-line:       var(--brick);
  --band-poor-fill:       color-mix(in oklab, var(--brick) 12%, var(--paper));

  /* no-data is bare paper under a faint diagonal hatch — never a bare grey.
     The hatch IMAGE is tokenised here so every no-data surface (map tile, bar,
     medallion, empty state, ink-key) draws the identical register. */
  --band-none-ink:        var(--ink-secondary);
  --band-none-line:       var(--ash);
  --band-none-fill:       var(--paper);
  --band-none-hatch:      var(--ash);
  --hatch-image:          repeating-linear-gradient(45deg,
                            var(--band-none-hatch) 0, var(--band-none-hatch) 1px,
                            transparent 1px, transparent 7px);

  /* — World-map outlines —
     The ocean ground and a no-data tile are both bare paper, so no-data land
     would vanish without a coastline. --map-land-line is the hairline drawn
     around every land path; coloured tiles drop it and lean on the bare paper
     GAP between neighbours (--map-tile-gap) as their separator instead. The
     micro-state rings reuse that same gap colour so a dot reads as detached
     from the country it sits on (e.g. SG over MY). Consumed inline by
     world_map_controller.js — the SVG fills/strokes are set in JS, not CSS. */
  --map-land-line:        var(--ash);
  --map-tile-gap:         var(--surface);

  /* — Feedback (kept inside the archival family, not bright UI colours).
     warning uses the AA-legible --ochre-ink so caution labels/text pass. — */
  --positive:         var(--myrtle);
  --warning:          var(--ochre-ink);
  --critical:         var(--brick);
  --positive-wash:    var(--band-good-fill);
  --warning-wash:     var(--band-moderate-fill);
  --critical-wash:    var(--band-poor-fill);
}