/* lbp-tokens.css — design tokens, reset, base type. SHARED across all pages.
   Extracted verbatim from index.html (canonical/freshest home). */
:root{
  --paper:#EDEFF2; --paper-2:#E1E6EC; --card:#FFFFFF;
  --ink:#15252E; --ink-soft:#43525C; --ink-faint:#83909A;
  /* Operator-fixed accents (2026-07-27): the warm accent is #9C3A0E and the deep
     blue is #0A2E43, site-wide. The -2 tokens are lighter steps of the SAME hue for
     gradients/hover only — never a different hue, which is what drifted before
     (a gold crown and ribbon against a burnt-orange accent). */
  --orange:#9C3A0E; --orange-2:#BB511A; --orange-tint:#9C3A0E;
  /* Locked palette (operator, 2026-07-29): #E7C9A8 sand, #143f5c blue, #F4DECF cream.
     --orange-tint used to be the pale cream BACKGROUND; it is now the solid accent, so
     the cream moves to the FOREGROUND role on those chips. Every block that pairs
     text with --orange-tint must use --on-tint, or it is accent-on-accent. */
  --on-tint:#F4DECF;
  --blue:#0A2E43; --blue-2:#114863; --blue-deep:#0A2E43; --blue-tint:#DDE9F0;
  --link:var(--blue); --link-tint:var(--blue-tint);
  /* FOREGROUND role of the warm accent. Identical to --orange in light; remapped in dark
     (see below) because #9C3A0E as TEXT on the dark card is only 2.13:1. Fills keep --orange. */
  --accent-text:var(--orange); --link-text:var(--blue);
  --pick-a:#BB511A; --pick-b:#9C3A0E; --hot-a:#1C6489; --hot-b:#114863;
  --line:#DAE0E6; --glass:rgba(237,239,242,.9); --panel:#0A2E43;
  --on-soft:#A6BECD;
  --shadow:0 1px 2px rgba(10,46,67,.06); --shadow-2:0 6px 22px rgba(10,46,67,.12);
  --display:"Montserrat",system-ui,-apple-system,sans-serif;
  --body:"Montserrat",system-ui,-apple-system,sans-serif;
  --sans:"Montserrat",system-ui,sans-serif;
  --r:14px; --r-sm:10px;
  /* Promoted 2026-07-27 from the per-page copies. These were declared in the :root block
     of 10+ generated page stylesheets and NOWHERE canonically, so the palette had no single
     owner. All copies agreed, so promotion was lossless. --sem-* are SEMANTIC (success /
     danger) and deliberately NOT the brand accent — they must never be swept into it. */
  --sem-pos:#1C7A4C; --sem-pos-tint:rgba(28,122,76,.14); --sem-pos-line:rgba(28,122,76,.34);
  --sem-neg:#C0392B; --sem-neg-tint:rgba(192,57,43,.13); --sem-neg-line:rgba(192,57,43,.34);
  --gold:#E9B949;
  /* LOGO METAL — sampled from logo-wreath.webp, not chosen: --wreath is the mean of the wreath's
     leaf FACES (bright+saturated pixels of the ring, outlines and shade excluded) and --wreath-hi
     their p85 highlight. Owns the wordmark crown and the eyebrow/tag labels that sit beside it.
     Identical in light and dark ON PURPOSE — a metal reads as the same metal in both themes. */
  --wreath:#E7C9A8; --wreath-hi:#E7C9A8;
  --logo-plate:#FFFFFF; --logo-plate-line:var(--line);
  --spec-base:24deg; --spec-range:70deg;
  color-scheme:light;
}
html[data-theme="dark"]{
  --paper:#0B1820; --paper-2:#11242F; --card:#152A37;
  --ink:#E7EFF4; --ink-soft:#A7BAC6; --ink-faint:#6E828F;
  /* Same two accents in dark — the theme used to shift the orange to #CF6E26 and the
     blue to #3795C2, which is exactly the drift being removed. */
  --orange:#9C3A0E; --orange-2:#BB511A; --orange-tint:#9C3A0E;
  --blue:#0A2E43; --blue-2:#114863; --blue-deep:#0A2E43; --blue-tint:rgba(17,72,99,.24);
  /* FOREGROUND-only split (2026-07-27). The two brand accents stay exactly as the operator
     fixed them above and keep driving every FILL (chips, buttons, rank badges, pagination
     pills — all white-on-accent and correct in dark). But as TEXT on the dark card (#152A37)
     they are unreadable: #0A2E43 = 1.05:1, #9C3A0E = 2.13:1. These two dark-only tokens
     carry the text role instead. Both values are already in the palette.
       --link-on-dark   #52ACD8 -> 5.82:1 on #152A37 (7.08:1 on #0B1820) — AA pass
       --accent-on-dark #E7C9A8 -> 8.18:1 on #152A37 (proven on the featured review cards) */
  --link-on-dark:#52ACD8; --accent-on-dark:#E7C9A8;
  --link:var(--link-on-dark); --accent-text:var(--accent-on-dark); --link-text:var(--link-on-dark);
  --pick-a:#8A3F0D; --pick-b:#5C2A06; --hot-a:#1A5470; --hot-b:#0D3346;
  --line:#243A46; --glass:rgba(11,24,32,.86); --panel:#07212F;
  --on-soft:#A7BAC6;
  --shadow:0 1px 2px rgba(0,0,0,.32); --shadow-2:0 6px 22px rgba(0,0,0,.4);
  --sem-pos:#4FBE87; --sem-pos-tint:rgba(79,190,135,.17); --sem-pos-line:rgba(79,190,135,.36);
  --sem-neg:#F0776A; --sem-neg-tint:rgba(240,119,106,.16); --sem-neg-line:rgba(240,119,106,.36);
  --gold:#F2C75C;
  --logo-plate:#C7D3DB; --logo-plate-line:rgba(255,255,255,.14);
  color-scheme:dark;
}
/* accent colour themes — recolour the warm primary accent across the site */
html[data-accent="red"]{--orange:#CE3B2E; --orange-2:#E25243; --orange-tint:rgba(206,59,46,.16); --link:#CE3B2E; --link-tint:rgba(206,59,46,.16)}
html[data-accent="green"]{--orange:#1E915A; --orange-2:#2BA86B; --orange-tint:rgba(30,145,90,.16); --link:#1E915A; --link-tint:rgba(30,145,90,.16)}
html[data-accent="blue"]{--orange:#2E73D0; --orange-2:#3E86E4; --orange-tint:rgba(46,115,208,.16); --link:#2E73D0; --link-tint:rgba(46,115,208,.16)}
html[data-accent="yellow"]{--orange:#C08A12; --orange-2:#DDA021; --orange-tint:rgba(192,138,18,.18); --link:#C08A12; --link-tint:rgba(192,138,18,.18)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-y:scroll}
/* critical: hide opt-in sections at first paint so their (unsized) images never flash giant before the late prefs stylesheet parses */
#topCards,#newsStrip{display:none}
html[data-picks="off"] .lead-actions{display:none}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
body,.post,.action,.navrail a,header,footer,.drawer{transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .25s ease}
h1,h2,h3,h4,.disp{font-family:var(--display);font-weight:600;line-height:1.1;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 22px}

/* ── Dark-mode FOREGROUND remap (2026-07-27) ────────────────────────────────────────
   Dark-only. The brand accents (--orange #9C3A0E, --blue #0A2E43) are unchanged and still
   drive every FILL; these rules only retarget the places where those two colours were used
   as TEXT on a dark surface, where they measured 2.13:1 and 1.05:1 on #152A37.
   Link/byline text follows --link (remapped to --link-on-dark #52ACD8, 5.82:1) automatically.
   The rules below cover accent-as-text, which cannot follow a token remap without breaking
   the fills. :where() keeps specificity at (0,1,1) so every existing multi-class exception
   (.sz-lead .nc-cat, .nc-cat.c-ind, .c-rg .nc-cat, …) still wins. Light mode is untouched. */
/* .rc-kick = review-page eyebrows · .rv-kick/.p-kick/.tl-kick/.news-kick = section eyebrows
   .gc-cat/.gc-cta/.rb-go = reviews-page guide category + guide links
   .nc-cat/.nc-more = newsroom category chips + "Read the story →" */
html[data-theme="dark"] :where(.rc-kick,.rv-kick,.p-kick,.tl-kick,.news-kick,.gc-cat,.gc-cta,.rb-go,.nc-cat,.nc-more){color:var(--accent-on-dark)}
html[data-theme="dark"] #newsStrip .ns-cat{color:var(--accent-on-dark)}
html[data-theme="dark"] .to-row:first-child .to-v{color:var(--accent-on-dark)}  /* calculator headline result */