@import url("/brand-tokens.css?v=20261005t");/* ============================================================================
   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; /* native form controls, scrollbars, and UA chrome render dark to match the design */
  /* ---- Color · surfaces (noir cinematic base, dark-first) ---- */
  --pv-noir:var(--desert-bg);  /* page background */
  --pv-noir-2:      var(--desert-card);  /* elevated surface: cards, sheets, modals */
  --pv-noir-3:      var(--desert-pressed);  /* pressed / deepest inset [MY CALL: extrapolated] */
  --pv-glass:rgba(var(--desert-ink-rgb), .82); /* sticky bars over content [WEB: backdrop-blur] */

  /* ---- Color · ink ---- */
  --pv-ivory:var(--desert-ink);  /* primary text — "Bone" (17.3:1 on noir ✓) */
  --pv-ivory-dim:rgba(var(--desert-ink-rgb), .62); /* secondary text (6.9:1 on noir ✓) */
  --pv-ivory-faint:rgba(var(--desert-ink-rgb), .38); /* 3.2:1 on noir — LARGE/DECORATIVE ONLY.
     Never body copy, never placeholders, never essential UI text. */
  --pv-rule:rgba(var(--desert-ink-rgb), .14); /* hairline dividers + idle borders (decorative, exempt) */

  /* ---- Color · on-accent text ---- */
  --pv-on-red:var(--desert-bg);  /* text/icons ON Signal Red fills. 5.18:1 ✓.
     White or ivory text on var(--brand-red) is 3.3–3.8:1 — BANNED (WCAG 1.4.3).
     Red primary buttons use THIS, not white. */

  /* ---- Color · brand accent: RED. No gold anywhere. Ever. ---- */
  --pv-red:var(--brand-red);  /* "Signal Red" — THE accent. Buttons, focus, live dots */
  --pv-red-deep:var(--brand-red-deep);  /* gradients within red family only, hover depth */
  --pv-red-ember:var(--brand-red-ember);  /* highlights, glow edges */
  --pv-red-wine:var(--brand-red-deep);  /* deepest red, scrims */
  --pv-red-glow:rgba(var(--brand-red-rgb),.35);  /* focus rings, button shadows */
  --pv-red-glow-lg:rgba(var(--brand-red-rgb),.55);

  /* ---- Color · status (never neon) ---- */
  --pv-live:var(--brand-red);  /* live = brand red, not green (5.18:1 on noir ✓) */
  --pv-warn:var(--color-warn);  /* muted amber, warnings only — DARK SURFACES ONLY.
     8.5:1 on noir ✓ / 2.0:1 on ivory ✗. Never on light backgrounds. [MY CALL] */
  --pv-muted-ok:var(--color-win);  /* desaturated sage for "available" — DARK SURFACES ONLY.
     7.4:1 on noir ✓ / 2.4:1 on ivory ✗. Never on light backgrounds.
     [MY CALL: never neon green] */

  /* ---- Type ---- */
  --pv-serif:'Playfair Display', Georgia, 'Times New Roman', serif; /* display */
  --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:4px;  /* 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-red-glow);
  --pv-shadow-btn-lg:0 16px 44px var(--pv-red-glow-lg);
  --pv-shadow-card:0 18px 44px rgba(var(--desert-shadow-rgb), .5);
  --pv-shadow-pop:0 40px 120px rgba(var(--desert-shadow-rgb), .6), 0 0 0 1px rgba(var(--brand-red-rgb),.28);
  --pv-shadow-bar:0 8px 28px rgba(var(--desert-shadow-rgb), .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(var(--desert-shadow-rgb), .5);
  --pv-shadow-chip-hover:0 8px 20px rgba(var(--desert-shadow-rgb), .4);
  /* ---- Focus ---- */
  --pv-focus-outline:2px solid var(--pv-red); /* THE focus indicator: 5.18:1 on
     noir, clears WCAG 2.4.13 (≥2px, 3:1). Always paired with 2px offset.
     On red fills use 2px solid var(--pv-ivory) instead (3.34:1 — clears the
     3:1 UI-component bar). The glow below is decoration, never the indicator. */
  --pv-focus-ring:0 0 0 3px var(--pv-red-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:var(--desert-card);
    --pv-ivory:var(--desert-bg);
    --pv-ivory-dim:var(--desert-ink);
  }
  nav[aria-label="Primary"], .pv-search, footer .pv-footer__sections {
    display:none;
  }
  body { background:var(--surface-light); color:var(--text-on-light); }
  a { color:var(--text-on-light); text-decoration:underline; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:11px; }
}/* ============================================================================
   LIGHT THEME — follows the device (James, 2026-10-02: "our website theme
   follows the theme of the device whether it's dark or light").
   --------------------------------------------------------------------------
   Dark stays the default and the brand. This block ONLY remaps the color
   tokens when the visitor's device is set to light mode — no layout, type,
   spacing, or motion changes. The media query is evaluated by the browser
   before first paint, so there is no flash-of-wrong-theme and no JS needed.

   The light look: "Previously in daylight" — warm paper whites, readable
   warm-black ink, the same Signal Red brand accent (deepened to --pv-red-ink
   wherever red meets light as TEXT, so contrast clears WCAG AA).
   Media wells (video players, image scrims) intentionally stay dark —
   a player is black in every theme, like YouTube in light mode.
   ========================================================================== */
@media (prefers-color-scheme:light){
  :root {
    color-scheme:light; /* native controls, scrollbars, UA chrome go light */

    /* ---- Surfaces: noir -> warm paper ---- */
    --pv-noir:var(--desert-card);  /* page background — warm paper white */
    --pv-noir-2:      var(--desert-card);  /* elevated surface: cards, sheets, modals */
    --pv-noir-3:      var(--desert-pressed);  /* pressed / deepest inset */
    --pv-glass:rgba(var(--desert-card-rgb), .88); /* sticky bars over content */

    /* ---- Ink: ivory -> warm near-black ---- */
    --pv-ivory:var(--desert-ink);  /* primary text (~15:1 on paper) */
    --pv-ivory-dim:rgba(var(--desert-ink-rgb), .68);  /* secondary text (~7:1) */
    --pv-ivory-faint:rgba(var(--desert-ink-rgb), .68);  /* secondary text floor, was .45 */
    --pv-rule:rgba(var(--desert-ink-rgb), .14);   /* hairline dividers + idle borders */

    /* ---- Red: fills stay Signal Red; red AS TEXT deepens for contrast ---- */
    --pv-red-ink:var(--brand-red-deep);  /* red text on paper — 6.6:1, clears AA */
    --pv-red-deep:var(--brand-red-deep);
    --pv-red-glow:rgba(var(--brand-red-rgb),.28);
    --pv-red-glow-lg:rgba(var(--brand-red-rgb),.45);

    /* ---- Status: dark-surface-only hues get light-safe versions ---- */
    --pv-warn:var(--color-warn);  /* 6:1 on paper (was dark-only amber) */
    --pv-muted-ok:var(--color-win);  /* 6:1 on paper (was dark-only sage) */

    /* ---- Shadows: black depth -> warm paper depth ---- */
    --pv-shadow-btn:0 10px 34px rgba(var(--brand-red-rgb),.28);
    --pv-shadow-btn-lg:0 16px 44px rgba(var(--brand-red-rgb),.42);
    --pv-shadow-card:0 18px 44px rgba(var(--desert-ink-rgb), .13);
    --pv-shadow-pop:0 40px 120px rgba(var(--desert-ink-rgb), .20), 0 0 0 1px rgba(var(--brand-red-rgb),.20);
    --pv-shadow-bar:0 8px 28px rgba(var(--desert-ink-rgb), .14);
    --pv-shadow-card-hover:0 14px 34px rgba(var(--desert-ink-rgb), .18);
    --pv-shadow-chip-hover:0 8px 20px rgba(var(--desert-ink-rgb), .16);

    /* ---- Focus: red outline still clears 3:1 on paper ---- */
    --pv-focus-outline:2px solid var(--pv-red-ink);
    --pv-focus-ring:0 0 0 3px rgba(var(--brand-red-rgb),.28);
  }
}