/* retrofuture-bridge.css — the legacy token names this site's components still use, mapped ONCE
   onto the shared design system. Loaded by src/layouts/Base.astro after global-tokens.css and
   revenant-ds.css, so the DS drives every value and no page needs a private `:root{…hex…}`.

   BLOGCHROME + GUARDIANNET HEAD used to emit :root blocks that override — now mapped here
   instead. BlogChrome carried the retrotype jewel identity (emerald/sapphire/amethyst/ruby/gold);
   GuardianNetHead carried its own set. Both now consume the same DS, deriving every value from
   named tokens so a future change edits DS once, not eight components.

   Measured 2026-09-13 (files using each name — components / pages):
     --gold 8/16  --gold-dk 1/21  --black 2/12  --muted 4/22  --white 5/14
     --surface 10/20  --border 10/26  --radius 5/13
   RATCHET: when `rka sites` shows a name at 0/0, delete its line here. The goal is an empty
   file, then no file. Until then this is the one place the two vocabularies meet. */
:root, [data-brand="retrofuture"] {
  /* BlogChrome legacy names */
  --gold:       var(--jewel-gold);
  --gold-ink:   var(--jewel-gold-ink);
  --cream:      #FBF3E4;              /* off-white ornament wash */
  --white:      #FFFFFF;
  --bdr:        var(--ink);           /* border = ink */
  --slate-ink:  #667889;              /* measured 4.55 on white */
  --rule-hair:  var(--paper-rule);
  --display:    var(--font-display);
  --font:       var(--font-body);
  --mono:       var(--font-mono);

  /* The six jewels BlogChrome carried — now in DS */
  --emerald:    var(--jewel-emerald);
  --sapphire:   var(--jewel-sapphire);
  --amethyst:   var(--jewel-amethyst);
  --ruby:       var(--jewel-ruby);

  /* Geometry: letterpress impression */
  --radius:     var(--radius-sm);
  --border-thick: var(--border-thick, 2px);
  --shadow:     var(--shadow-md);
  --shadow-jewel: var(--shadow-jewel, 3px 3px 0 var(--jewel-emerald));

  /* GuardianNetHead legacy names — mapped to jewel equivalents where matching */
  --gold-dk:    #A0692C;              /* not in BlogChrome jewels, kept for compat */
  --gold-lt:    #FBF2E5;
  --black:      var(--ink);
  --muted:      var(--ink-mid);
  --off-black:  var(--ink-mid);
  --ok:         var(--jewel-emerald);
  --bad:        var(--jewel-ruby);
  --warn:       var(--jewel-gold);
  --fd:         var(--font-display);
  --fb:         var(--font-body);
}
/* the site's legacy page ground: every page set body{background:var(--surface)} with --surface
   = #F8F7F3. Under the DS the ground is --paper; --surface is the raised card. Body follows. */
body { background: var(--paper); color: var(--ink); font-family: var(--fb); }

/* ─── ALIGN TO THE HOMEPAGE (2026-09-28) ─────────────────────────────────────
   Sub-pages rendered on the DS's cream paper while the homepage renders on themes.css
   (revenant-light: mint ground, teal ink, Space Grotesk heads over Inter). Base.astro now
   loads themes.css too; this block points the DS names the sub-pages use at the SAME theme
   tokens, so a theme change (or the saved-theme pick) moves every page together.
   html[data-theme] outranks the :root / [data-brand] blocks above, so these win. */
html[data-theme] {
  --paper:        var(--bg);
  --paper-mid:    var(--surface-2);
  --ink:          var(--text);
  --ink-mid:      var(--muted);
  --font-display: var(--font-d);
  --font-body:    var(--font-b);
  /* The homepage carries no gold or amber: the old gold names become the lead teal, and
     --white is white again (engage.astro aliased it to a palette token that resolves to ink,
     so its primary button rendered ink-on-ink with an invisible label). */
  --gold:         var(--accent);
  --gold-dk:      var(--accent);
  --gold-ink:     var(--accent);
  --gold-lt:      var(--surface-2);
  --white:        #FFFFFF;
}
html[data-theme] body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-b); }
:where(html[data-theme]) :where(h1, h2, h3, h4) { font-family: var(--font-d); color: var(--text); }

/* The homepage's column and label, as zero-specificity defaults: a page that defines its own
   .wrap/.eyebrow wins; a page that forgot them (guardianet did) still lands on the shared look. */
:where(.wrap) { max-width: 1080px; margin: 0 auto; padding: 0 clamp(1rem, 5vw, 2.5rem); }
:where(.eyebrow) { font-family: var(--font-m); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }