/* ============================================================================
   PREVIOUSLY — DESIGN TOKENS · v1.0 — APPROVED, THE LAW (James, 2026-09-28)
   The law every rebuilt page follows. Derived from the approved song-page
   template ("that's the standard to our pages" — James, 2026-09-28) and his
   standing rules in ~/AGENTS.md.
   One source of truth: pages consume these variables, never hardcode values.
   Platform-agnostic: hex colors, 4pt spacing, dp-convertible radii.
   Web-only notes marked [WEB]. Android maps: px->dp 1:1 at mdpi, blur->elevation.
   ============================================================================ */

:root{
  color-scheme: dark; /* d3 canonical (#262): dark ground, native controls dark to match */
  /* ---- Color · surfaces (noir cinematic base, dark-first) ---- */
  --pv-noir:        #0C121B;  /* d3 ground — page background */
  --pv-noir-2:      #141F2C;  /* d3 surface-1: cards, sheets, modals */
  --pv-noir-3:      #1B2A3B;  /* d3 surface-2 */
  --pv-inset:       #0A0F16;  /* d3 inset */
  --pv-glass:       rgba(12,18,27, .97); /* sticky bars over content [WEB: backdrop-blur] */

  /* ---- Color · ink ---- */
  --pv-ivory:       #C7D0DA;  /* d3 text — primary (11.9:1 on ground ✓) */
  --pv-ivory-dim:   #A4B3C2; /* d3 text-2 — secondary (7.9:1 on ground ✓) */
  --pv-ivory-faint: #8FA3B5; /* d3 text-3 — tertiary (5.9:1 on ground ✓) */
  --pv-rule:        #223343; /* d3 line — hairline dividers + idle borders (decorative, exempt) */

  /* ---- Color · on-accent text ---- */
  --pv-on-gold:     #0C121B;  /* text/icons ON gold fills (9.0:1 on #F2BC68 ✓) */

  /* ---- Color · brand accent: GOLD #F2BC68 — the d3 signature (#262) ---- */
  --pv-gold:        #F2BC68;  /* THE accent. Buttons, kickers, focus, active states */
  --pv-gold-deep:   #B07E2E;  /* accent-deep — hover depth within the gold family */
  --pv-gold-ember:  #F2BC68;  /* highlights, glow edges */
  --pv-gold-rgb:    242,188,104;
  --pv-gold-glow:   rgba(242,188,104, .35);  /* focus rings, button shadows */
  --pv-gold-glow-lg:rgba(242,188,104, .55);

  /* ---- Color · status (never neon) ---- */
  --pv-live:        #F46B62;  /* LIVE ONLY — coral, never brand/decoration (6.0:1 on ground ✓) */
  --pv-live-rgb:    244,107,98;
  --pv-live-glow:   rgba(244,107,98, .5);
  --pv-warn:        #A4B3C2;  /* neutral silver — warnings carry text, not a hue */
  --pv-muted-ok:    #A4B3C2;  /* neutral silver for "available" */

  /* ---- Type ---- */
  --pv-display: 'Previously Display', 'Marathon Long Run Display', sans-serif; /* display — Marathon (mastheads/section display) */
  --pv-headline: 'Previously Headline', Anton, sans-serif; /* titles — Anton */
  --pv-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* body/UI */

  /* Type scale — display sizes use fluid clamp(); body fixed for rhythm */
  --pv-display-xl: clamp(120px, 22vw, 320px); /* ghost outline titles [WEB] */
  --pv-display:    clamp(52px, 9.5vw, 148px); /* page hero titles */
  --pv-title:      clamp(28px, 3.4vw, 44px);  /* section titles */
  --pv-h3:         clamp(20px, 2.4vw, 26px);
  --pv-lede:       clamp(18px, 2vw, 22px);
  --pv-body:       17px;
  --pv-body-sm:    14px;
  --pv-caption:    13px;
  --pv-label:      11px;  /* micro labels: ALWAYS uppercase + tracked */
  --pv-label-xs:   10px;

  --pv-track-xl: .34em;  /* kickers */
  --pv-track-lg: .24em;  /* buttons */
  --pv-track-md: .18em;  /* chips */
  --pv-track-tight: -.02em; /* display serif */

  --pv-leading-display: .94;
  --pv-leading-title: 1.08;
  --pv-leading-body: 1.6;
  --pv-leading-ui: 1.4;

  /* ---- Spacing · 4pt base ---- */
  --pv-s1: 4px;  --pv-s2: 8px;  --pv-s3: 12px; --pv-s4: 16px;
  --pv-s6: 24px; --pv-s8: 32px; --pv-s12: 48px; --pv-s16: 64px;
  --pv-s24: 96px; --pv-s32: 128px;

  /* ---- Radii ---- */
  --pv-r-pill: 10px;  /* buttons, chips, search, toggles */
  --pv-r-card: 16px;   /* cards, sheets */
  --pv-r-card-sm: 14px;
  --pv-r-sm: 8px;      /* inputs-inline, tags */
  --pv-r-round: 50%;

  /* ---- Shadows · red glow for brand moments, black for depth ---- */
  --pv-shadow-btn:    0 10px 34px var(--pv-gold-glow);
  --pv-shadow-btn-lg: 0 16px 44px var(--pv-gold-glow-lg);
  --pv-shadow-card:   0 18px 44px rgba(0,0,0, .5);
  --pv-shadow-pop:    0 40px 120px rgba(0,0,0, .6), 0 0 0 1px rgba(242,188,104, .28);
  --pv-shadow-bar:    0 8px 28px rgba(0,0,0, .45);

  /* ---- Layout ---- */
  --pv-content-max: 1280px;   /* inner content measure. The outer shell caps at
     1440px (full-bleed heroes exempt — they run edge to edge). */
  --pv-shell-max: 1440px;     /* outer shell cap for ultrawide monitors */
  --pv-gutter: 32px;       /* desktop page padding */
  --pv-gutter-sm: 20px;    /* phone page padding */
  --pv-nav-h: 64px;        /* desktop nav height; 56px below 1024px (see below) */

  /* ---- Breakpoints (for documentation; use in media queries) ---- */
  --pv-bp-phone: 390px;
  --pv-bp-tablet: 768px;
  --pv-bp-laptop: 1024px;
  --pv-bp-wide: 1440px;

  /* ---- Z-index scale (one scale, whole site — no page invents its own) ---- */
  --pv-z-content: 1;
  --pv-z-sticky: 10;       /* sticky section headers, table heads */
  --pv-z-search: 40;       /* uniform search bar (sticky) */
  --pv-z-nav: 50;          /* sticky nav — above search, below overlays */
  --pv-z-consent: 90;      /* cookie banner + preferences modal */
  --pv-z-modal: 100;       /* dialogs, sheets, lightboxes */
  --pv-z-toast: 110;       /* transient notifications, topmost */

  /* ---- Touch targets ---- */
  --pv-target-min: 44px;   /* WCAG 2.2 AA target size. Every tappable control is
     at least 44×44 CSS px. No exceptions — phone and desktop. */

  /* ---- Motion ---- */
  --pv-ease: cubic-bezier(.22,.8,.28,1);
  --pv-ease-snap: cubic-bezier(.3,1.4,.4,1); /* springy: ONLY for playful elements (poll bars, VS badges) */
  --pv-t-instant: .1s;   /* touch feedback, active/press states */
  --pv-t-fast: .18s;     /* hover states, focus rings, small fades */
  --pv-t-med: .25s;      /* card lifts, drawer slides, tab switches */
  --pv-t-slow: .4s;      /* page-level reveals, large panel animations */
  --pv-t-reveal: .6s;    /* scroll-triggered reveals */
  --pv-hero-rotate: 30s;   /* hero auto-advance cadence — never faster */
  /* ---- Micro-interaction shadows (spec §12) ---- */
  --pv-shadow-card-hover: 0 14px 34px rgba(0,0,0, .5);
  --pv-shadow-chip-hover: 0 8px 20px rgba(0,0,0, .4);
  /* ---- Focus ---- */
  --pv-focus-outline: 2px solid var(--pv-gold); /* THE focus indicator — gold on
     ground clears WCAG 2.4.13 (≥2px, 3:1). Always paired with 2px offset.
     The glow below is decoration, never the indicator. */
  --pv-focus-ring: 0 0 0 3px var(--pv-gold-glow);
}/* Nav height follows the nav spec: 64px desktop, 56px below 1024px.
   One variable name — components (search sticky offset, etc.) just use it. */
@media (max-width: 1023px){
  :root { --pv-nav-h: 56px; }
}/* Reduced motion: the law, everywhere */
@media (prefers-reduced-motion: reduce){
  :root { --pv-hero-rotate: 0s; }
}/* Forced colors (Windows High Contrast) — the design degrades honestly:
   focus stays visible, text stays readable, decoration steps aside. */
@media (forced-colors: active){
  :root {
    --pv-focus-outline: 2px solid ButtonText;
  }
  a, button { forced-color-adjust: auto; }
  .pv-search__bar, .pv-search__clear, .pv-search__retry {
    border: 1px solid ButtonText;
  }
}/* Print — dark-first on screen, ink-honest on paper: light, minimal, no chrome. */
@media print{
  :root {
    color-scheme: light;
    --pv-noir: #FFFFFF;
    --pv-ivory: #111820;
    --pv-ivory-dim: #3D4753;
  }
  nav[aria-label="Primary"], .pv-search, footer .pv-footer__sections {
    display: none;
  }
  body { background: #FFFFFF; color: #111820; }
  a { color: #111820; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* ==== D3 CONVERSION 2026-10-21 (#259 Phase 2, per #262 + #280) ====
   The v1.0 "Golden" values and the 2026-10-17 signal-red house values are
   retired — CUT, not overridden: this sheet now carries the canonical d3
   values NATIVELY (no remap/bridge layer). Gold #F2BC68 is the signature;
   coral #F46B62 is LIVE only. Page-scoped: this file serves /live/ only. */
:root, body.b-scope{
  color-scheme: dark;
  --pv-noir:#0C121B; --pv-noir-2:#141F2C; --pv-noir-3:#1B2A3B; --pv-inset:#0A0F16;
  --pv-glass:rgba(12,18,27,.97);
  --pv-ivory:#C7D0DA; --pv-ivory-dim:#A4B3C2; --pv-ivory-faint:#8FA3B5;
  --pv-rule:#223343;
  --pv-on-gold:#0C121B;
  --pv-gold:#F2BC68; --pv-gold-deep:#B07E2E; --pv-gold-ember:#F2BC68;
  --pv-gold-rgb:242,188,104;
  --pv-gold-glow:rgba(242,188,104,.35); --pv-gold-glow-lg:rgba(242,188,104,.55);
  --pv-live:#F46B62; --pv-live-rgb:244,107,98; --pv-live-glow:rgba(244,107,98,.5);
  --pv-warn:#A4B3C2; --pv-muted-ok:#A4B3C2;
  --pv-display:'Previously Display', 'Marathon Long Run Display', sans-serif;
  --pv-headline:'Previously Headline', Anton, sans-serif;
  --pv-sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pv-shadow-card:0 18px 44px rgba(0,0,0,.5);
  --pv-shadow-card-hover:0 14px 34px rgba(0,0,0,.5);
  --pv-shadow-chip-hover:0 8px 20px rgba(0,0,0,.4);
  --pv-shadow-bar:0 8px 28px rgba(0,0,0,.45);
  --pv-shadow-pop:0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(242,188,104,.28);
}