/*
 * Nuclear Resister — Design Tokens (CSS custom properties)
 * Source of truth: ../../../design/tokens.md (Willa v2.0, 2026-05-14)
 *
 * Locked palette — do NOT introduce new color values.
 * Every contrast ratio claimed here is verified in tokens.md §7.
 *
 * ===========================================================================
 * THIS FILE LIVES IN public/, NOT src/styles/, AND THAT IS LOAD-BEARING.
 * ===========================================================================
 * Moved 2026-08-15. It used to be `@import './tokens.css'` at the top of
 * src/styles/global.css, which meant Vite inlined it into a content-hashed
 * bundle (/_astro/BaseLayout.<hash>.css) whose name changes on every build.
 *
 * The Lowthian Editor's style bridge fetches the front end's content CSS and
 * injects it into the WordPress block-editor canvas, so the client edits
 * against the same bytes a visitor gets. It needs a STABLE, PREDICTABLE URL —
 * a build hash is unfetchable by anything that is not this build. public/ is
 * copied to dist/ verbatim, so this file is served at exactly /tokens.css.
 *
 * It is loaded FIRST, ahead of the Astro bundle, by a <link> in
 * src/layouts/BaseLayout.astro. Every rule in /wp-content.css is written in
 * var(--nr-*), so the bridge must load this file before that one.
 *
 * Consequences, so nobody re-"optimises" this back:
 *   - Do NOT re-add the @import to global.css. Two copies of :root would ship.
 *   - Do NOT inline a :root block into /wp-content.css as a shortcut. Same
 *     duplication, and the palette Willa locked would then have two homes.
 *   - This file is unhashed, so it is cached by URL. A token change needs a
 *     Cloudflare purge of /tokens.css; the hashed bundles purge themselves.
 * ===========================================================================
 */

:root {
  /* ============================================================
   * 1. COLOR TOKENS (tokens.md §1)
   * ============================================================ */

  /* Brand primitives — palette, locked */
  --nr-navy: #3371A3;
  --nr-bright-blue: #3166C4;   /* CLIENT-DIRECTED 2026-06-07 Round 2: OREPA blue. Churn: #225EC6 → #0000FF → #3166C4. 5.49:1 on white / 4.78–4.89:1 on #efefef — Tate-confirmed AA at all sizes (accessibility-audit-2026-06-06-client-color-round.md, Round-2 update). Header wordmark SVG fills (nuclear-resister-logo.svg) now match this value too — recolored 2026-06-30 (Geoffrey-confirmed in conversation), retiring the prior #0000FF exception. */
  --nr-rust: #cf2e2e;
  --nr-yellow: #fcb900;
  --nr-yellow-dark: #f0a800;
  --nr-yellow-darker: #e5a700;
  --nr-light-gray: #efefef;
  --nr-mid-gray: #555555;
  --nr-white: #ffffff;
  --nr-black: #000000;

  /* Footer Navy — locked-palette member (PROJECT_BRIEF / CLAUDE.md):
   * "Footer Navy #1d3a52 (darker)". This is distinct from the primary
   * Navy #3371A3 and is the correct footer background. The footer
   * previously rendered #3371A3 because --nr-footer-bg pointed at
   * --nr-navy (regression context: 2026-05-15 revision item 5 follow-up).
   * White text on #1d3a52 = 11.80:1 (vs 5.21:1 on #3371A3) — see §7. */
  --nr-footer-navy: #1d3a52;

  /* Page-top accent line — thin full-bleed band above the masthead.
   * Client revision 2026-05-15 item 1: "thin blue line across the very
   * top, like the red line in the reference". Reference screenshot
   * measured a ~2px full-bleed hairline; client requested Navy (not the
   * reference's red). Navy = locked-palette brand primitive. */
  --nr-topbar-line: var(--nr-bright-blue);
  --nr-topbar-line-height: 6px; /* client 2026-06-06 item 2b: top blue line twice as thick (was 3px) */

  /* Masthead */
  --nr-masthead-bg: var(--nr-white);
  --nr-masthead-top-line: var(--nr-navy);
  --nr-masthead-wordmark: var(--nr-bright-blue); /* client 2026-06-06: wordmark in pure logo blue. Actual wordmark color lives in the logo SVG fills (nuclear-resister-logo.svg) — recolored from #0000FF to #3166C4 2026-06-30, now matches this token exactly, no exception remaining. */

  /* Menu bar.
   * Client revision 2026-05-15 item 2: nav background -> gradient,
   * derived from the reference screenshots. Reference was measured
   * (PIL median sweep) as a VERTICAL gold gradient, darker at the top
   * easing lighter toward the bottom. Implemented inside the locked
   * palette: top = yellow-dark #f0a800, bottom = yellow #fcb900 (both
   * are locked primitives — no new color invented).
   * Direction lives here (SSOT) so desktop + mobile stay in sync.
   * Contrast: nav text is black (--nr-menu-text). Worst-case black on
   * the darkest gradient stop (#f0a800) = 10.31:1 — clears WCAG AA
   * (4.5:1) with wide headroom at every point of the gradient. */
  /* Round 2 2026-06-09: deepened the top stop so the gradient actually READS
     on the short menu bar (42px) + footer strip (59px) — the locked golds
     were too close and rendered flat. #d98700 is a deeper gold beyond the
     locked primitives (PALETTE EXTENSION — flag for Willa/Tate blessing).
     Black text on #d98700 = 7.41:1, still clears AA (was 10.31:1 on #f0a800). */
  --nr-gold-gradient-top: #d98700;
  --nr-menu-bg-gradient-start: var(--nr-gold-gradient-top);
  --nr-menu-bg-gradient-end: var(--nr-yellow);
  --nr-menu-bg-gradient: linear-gradient(
    to bottom,
    var(--nr-menu-bg-gradient-start),
    var(--nr-menu-bg-gradient-end)
  );
  --nr-menu-text: var(--nr-black);
  --nr-menu-text-hover: var(--nr-black);
  --nr-menu-text-focus: var(--nr-black);
  --nr-menu-dropdown-bg: var(--nr-white);
  --nr-menu-dropdown-text: var(--nr-bright-blue); /* client 2026-06-06 */
  --nr-menu-dropdown-text-hover: var(--nr-bright-blue); /* client 2026-06-06 item 2e: NO red on menu hover — stays blue, underline carries the hover affordance (was --nr-rust) */

  /* Intro */
  --nr-intro-bg: var(--nr-white);
  /* --nr-intro-text-primary RETIRED Round 2 2026-06-09 — split into two tokens below.
     Headline and sub-text are now different colors. Do not reintroduce this token. */
  --nr-intro-text-headline: var(--nr-bright-blue); /* intro headline — blue, 5.49:1 on white PASS */
  --nr-intro-text-sub: var(--nr-black);             /* intro sub-text — black per client 2026-06-07 (Round-1 reversal). 21:1 PASS AAA */
  --nr-intro-readmore: var(--nr-rust);              /* top "Read More" link — rust per client 2026-06-07 (Round-1 reversal: was navy). 5.85:1 PASS */
  --nr-intro-accent: var(--nr-rust); /* Yellow on white = 1.85:1 FAIL — Rust substituted */

  /* News */
  --nr-news-bg: var(--nr-white);
  --nr-news-section-title: var(--nr-bright-blue); /* client 2026-06-06: "Resistance News" title in pure logo blue (Palatino unchanged) */
  --nr-news-headline: var(--nr-bright-blue); /* client 2026-06-06: post headlines in pure logo blue */
  --nr-news-body: var(--nr-black);
  --nr-news-date: var(--nr-mid-gray);
  --nr-news-readmore: var(--nr-rust);
  --nr-news-readmore-hover: var(--nr-rust);

  /* All reports */
  --nr-all-reports-link: var(--nr-rust);
  --nr-all-reports-link-hover: var(--nr-rust);

  /* Footer */
  --nr-footer-bg: var(--nr-footer-navy); /* #1d3a52 — locked Footer Navy, NOT primary Navy */
  /* Client 2026-06-06: footer bg → "brighter blue, like the current NR header background".
   * The *visible* old-site header is a royal-blue watercolor gradient image (header2.jpg,
   * canvas-sampled ~#005dff top → #25408f bottom; Desk 1 cited #0856e5) — NOT the #3371A3
   * CSS solid sitting behind it. Geoffrey 2026-06-06 (reversing an earlier "keep #3371A3"
   * call): make it TRUE to the clients' request — use the royal blue #0856e5 so they review
   * it the way they asked. (Geoffrey intends to push back on them, but lets them see it first.)
   * FINAL VALUE = #0856e5 (Geoffrey 2026-06-06, header-match): the brighter royal blue that
   * matches the live old-site header background, which is exactly what the clients asked for
   * (verbatim line 34: "Brighter blue for the footer background (like the current NR website
   * header background)"). This supersedes the brief interim #3953a4 (the footer-emblem's own
   * darker backdrop) — that was too dark and not their stated ask. White footer text/icons
   * on #0856e5 = ~6.0:1 PASS AA. The emblem's own black linework reads ~2.4:1 here but is a
   * LOGO and WCAG 1.4.x-exempt; the visible-rectangle/halo risk is checked on the rendered page.
   * History: #3371A3 (CSS-fallback trap) → #0856e5 (true-to-header royal) → #3953a4 (emblem
   * backdrop, too dark) → #0856e5 (back to the clients' header-match ask, Geoffrey-confirmed).
   * Note: yellow clears ~4.4:1 here — footer link-hover + focus rings stay WHITE
   * (--nr-focus-ring-on-navy-mid) for safety/consistency.
   * accessibility-audit-2026-06-06-client-color-round.md §3. */
  --nr-footer-bright-bg: #3166C4;  /* Round 2 2026-06-09: OREPA blue per client 2026-06-07. Churn: #3371A3 → #0856e5 → #3953a4 → #0856e5 → #3166C4. White text = 5.49:1 PASS. */
  /* Round 3 2026-06-30 item 5: client asked for an OREPA-style gradient footer body
     (concept only, not their literal CSS) — headline blue at top fading to a darker
     shade at the bottom. Reuses two already-locked palette tokens, no new color
     invented: --nr-bright-blue (#3166C4, top) -> --nr-footer-navy (#1d3a52, bottom,
     the project's locked "Footer Navy"). Both channels decrease monotonically
     top->bottom so contrast only improves down the gradient — white text:
     top stop 5.49:1 PASS, bottom stop 11.80:1 PASS (verified via WCAG relative-
     luminance formula, both far past the 4.5:1 normal-text floor). Does NOT touch
     --nr-footer-strip-bg (separate gold strip, Round 2 item 7, unaffected). */
  --nr-footer-gradient: linear-gradient(
    to bottom,
    var(--nr-bright-blue),
    var(--nr-footer-navy)
  );
  --nr-footer-text-primary: var(--nr-white);
  --nr-footer-text-secondary: var(--nr-white); /* Revised from #d0dce8 per tokens.md §7 correction */
  --nr-footer-text-accent: var(--nr-yellow);
  --nr-footer-link-default: var(--nr-white);
  --nr-footer-link-hover: var(--nr-yellow);

  /* Donate */
  --nr-donate-bg: var(--nr-yellow);
  --nr-donate-bg-hover: var(--nr-yellow-darker);
  --nr-donate-text: var(--nr-black);
  --nr-donate-text-hover: var(--nr-black);

  /* Social icons */
  --nr-social-icon: var(--nr-bright-blue); /* client 2026-06-06: header FB/IG icons in pure logo blue (footer icons use --nr-footer-text-primary, unaffected) */
  --nr-social-icon-hover: var(--nr-rust);
  --nr-social-icon-hover-on-yellow: var(--nr-black); /* tokens.md §3 / F-4 — Rust on Yellow fails 3:1 */

  /* Page body */
  --nr-body-bg: var(--nr-light-gray);

  /* Focus rings — three contexts (tokens.md §6) */
  /* ⚠️ CEILING: --nr-focus-ring IS FOR LIGHT SURFACES ONLY.
   * Navy #3371A3 measures 2.27:1 on the footer/overlay navy (#1d3a52) and 1:1 on
   * the brighter-blue footer surface — both fail SC 1.4.11's 3:1, and an
   * invisible focus ring is a Level AA failure, not a cosmetic one.
   * On ANY dark surface use --nr-focus-ring-on-navy (Yellow, 6.79:1 on #1d3a52)
   * or --nr-focus-ring-on-navy-mid (White).
   * Added 2026-08-12 (Tate a11y gate A-3, lightbox). This is the FOURTH time
   * this project has hit ring-on-dark; the token file is where it stops
   * recurring, so check this line before styling a focus state on dark. */
  --nr-focus-ring: var(--nr-navy);
  --nr-focus-ring-on-yellow: var(--nr-black);
  --nr-focus-ring-on-navy: var(--nr-yellow);
  /* Client 2026-06-06: focus ring for the #3371A3 brighter-blue footer surface.
   * Default --nr-focus-ring (#3371A3) on #3371A3 = 1:1 invisible (Critical). White = 5.21:1 PASS. */
  --nr-focus-ring-on-navy-mid: #ffffff;

  /* ============================================================
   * 2. TYPOGRAPHY (tokens.md §2)
   * ============================================================ */
  --nr-font-body: Verdana, Geneva, Tahoma, "DejaVu Sans", sans-serif;
  --nr-font-display: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;

  /* ============================================================
   * 3. TYPE SCALE (tokens.md §3)
   * 16px minimum everywhere — no exceptions.
   * ============================================================ */
  --nr-text-body: 1rem;          /* 16px */
  --nr-text-date: 1rem;          /* 16px (discretion via color, not size) */
  --nr-text-readmore: 1rem;      /* 16px */
  --nr-text-summary: 1.125rem;   /* 18px */
  --nr-text-intro-large: 1.75rem; /* 28px */
  --nr-text-post-headline: 1.375rem; /* 22px */
  --nr-text-menu: 1rem;          /* 16px */
  --nr-text-dropdown: 1rem;      /* 16px */
  --nr-text-section-title: 2.25rem; /* 36px */
  --nr-text-footer-org: 1.25rem; /* 20px */

  --nr-leading-body: 1.65;
  --nr-leading-summary: 1.6;
  --nr-leading-headline: 1.3;
  --nr-leading-post-headline: 1.35;
  --nr-leading-tight: 1.2;
  --nr-leading-flat: 1;
  --nr-leading-normal: 1.5;

  --nr-weight-regular: 400;
  --nr-weight-bold: 700;

  /* ============================================================
   * 4. SPACING (tokens.md §4) — 4px base grid
   * ============================================================ */
  --nr-space-1: 0.25rem;  /* 4 */
  --nr-space-2: 0.5rem;   /* 8 */
  --nr-space-3: 0.75rem;  /* 12 */
  --nr-space-4: 1rem;     /* 16 */
  --nr-space-5: 1.25rem;  /* 20 */
  --nr-space-6: 1.5rem;   /* 24 */
  --nr-space-7: 1.75rem;  /* 28 */
  --nr-space-8: 2rem;     /* 32 */
  --nr-space-9: 2.25rem;  /* 36 */
  --nr-space-10: 2.5rem;  /* 40 */
  --nr-space-11: 3rem;    /* 48 */
  --nr-space-12: 4rem;    /* 64 */

  /* ============================================================
   * 5. BREAKPOINTS (tokens.md §5) — reference values; @media queries hard-code these
   * ============================================================ */
  /* Mobile  < 640px
   * Tablet  640 – 1023px
   * Desktop >= 1024px */

  /* ============================================================
   * 6. RADII (tokens.md §6)
   * ============================================================ */
  --nr-radius-button: 3px;
  --nr-radius-flat: 0;

  /* Container max-widths */
  --nr-container-max: 1280px;
  --nr-content-max: 1140px;      /* interior framed content column */
  --nr-intro-headline-max: 720px;
  --nr-readable-measure: 65ch;
  --nr-footer-column-max: 720px;
  --nr-search-max: 780px;        /* search page + results — wider than 65ch body, narrower than full content col */

  /* New tokens — Willa design review 2026-06-03 */
  --nr-rust-dark: #a82323;  /* Rust hover — white text = 6.84:1 passes AA Normal */
  --nr-divider:   #e8e8e8;  /* light divider line — replaces all raw #e8e8e8 in components */

  /* Round 2 additions — 2026-06-09 (tokens.md v2.1, round2-spec-2026-06-09.md) */
  --nr-footer-strip-bg: var(--nr-menu-bg-gradient);   /* Item 7: footer bottom strip uses same gradient as menu bar. Black text on #f0a800 worst stop = 10.32:1 PASS AAA */
  /* RETIRED 2026-08-01 (round 4 item 2). The interior-page title band these
     three describe was removed — clients asked for page titles on white, like
     Resistance News / Website Archive. Kept as a tombstone so nobody
     reintroduces them thinking the band is still a thing. No rule references
     them; see InteriorPageLayout.astro. */
  --nr-title-band-top: var(--nr-body-bg);              /* RETIRED — Item 10: space above interior page title band */
  --nr-title-band-padding-top: 20px;                  /* RETIRED — Item 11: title band top inner padding */
  --nr-title-band-padding-bottom: 30px;               /* RETIRED — Item 11: title band bottom inner padding */
}