/* Rochdale Daily — design tokens. THE single source of truth.
 *
 * Why this file exists: the paper was running three palettes at once. The
 * homepage carried its own private :root inline (accent #0e7490), the shared
 * editorial-theme.css defined the SAME token names with different values
 * (accent #176d7d), and site.css still held the retired gold (#f5c400). Fifteen
 * of the twenty shared tokens disagreed, down to the paper colour itself. A
 * reader moving from the front page to an article crossed between designs, and
 * any colour change only landed on whichever of the six :root blocks you
 * happened to edit.
 *
 * Every stylesheet and page now imports THIS file. The compatibility layer
 * below makes the current newspaper shell authoritative even on legacy pages
 * that still carry page-local presentation rules. New component work belongs
 * in editorial-theme.css; newspaper-global.css exists only to stop old shells
 * from overriding the publication identity while those templates are retired.
 *
 * Naming rule: tokens are named for their ROLE, never their colour. The old
 * "--yellow" holding a cyan value is exactly the trap that caused the drift.
 *
 * ---------------------------------------------------------------------------
 * BROADSHEET PORT, 13 September 2026
 *
 * Values below are taken from the design canvas, measured rather than eyeballed:
 * the page ground, the hairline, the ink ramp and the type scale were read off
 * the rendered artboard with getComputedStyle. Because every page imports this
 * file, changing values here restyles all 24 page types and the 1,250 archive
 * pages at once. No token name has been removed and no class has been renamed,
 * so nothing that JavaScript or the generators reference can break.
 *
 * The one thing to understand before editing: the previous palette was cool
 * (navy/teal on near-white). This one is warm (ink-brown on newsprint cream).
 * Mixing the two is what made the site feel unresolved before, so a stray
 * #0f6e80 or #ffffff now reads as a mistake rather than a variation.
 */

/* Fonts are loaded HERE rather than in eighteen separate <link> tags. Every
   page already imports this file, so one change dresses the whole paper and
   there is no page left behind on the old faces. Must stay above the other
   @import rules and any declaration: CSS ignores an @import that follows one. */
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

/* CACHE-BUSTING VERSION, added 15 September 2026.
 *
 * Why the ?v= is here and not left to _headers: the Cloudflare zone's Browser
 * Cache TTL rewrites this site's CSS headers to `public, max-age=14400`
 * whatever _headers asks for, so a returning reader kept a stylesheet for four
 * hours. Measured on 15 Sep: the origin was serving 374 rules and the browser
 * was using a 69-rule copy from 13 Sep -- an entire day's work was invisible.
 *
 * A query string changes the URL, and a URL that has never been requested
 * cannot be served from a cache, so this works even with the zone setting left
 * alone. BUMP THE STRING IN EVERY PLACE IT APPEARS whenever any of the three
 * imported sheets changes: here, in index.html's rd-tokens link, and in the
 * rd-tokens imports inside editorial-theme.css, community-poll.css and
 * site.css. The real fix is still the zone setting -- Caching -> Configuration
 * -> Browser Cache TTL -> "Respect Existing Headers" -- after which this is
 * belt and braces rather than the only thing holding it up. */
@import url("/assets/css/newspaper-global.css?v=20260915d");
@import url("/assets/css/public-families.css?v=20260915d");
@import url("/assets/css/newsletter-component.css?v=20260915d");

:root {
  /* ---------------------------------------------------------------- brand */
  /* The identity moves off navy-and-teal onto the newsprint palette: warm ink
     on cream, with a single brown accent. --brand-navy is kept as a token name
     because 24 page types and several generators reference it; it now holds the
     ink brown so a legacy rule that paints a band with it produces a dark
     newsprint band rather than a leftover blue one. */
  --brand-navy:        #2b2824;
  --brand-navy-deep:   #1c1a17;
  --brand-accent:      #6b5a46;
  --brand-accent-dark: #52442f;
  --brand-accent-lift: #c9b79a;  /* accent on dark ground only */

  /* ------------------------------------------------------------- surfaces */
  /* #f6f5f1 is the page. #fffdf7 is anything that should lift off it — a card,
     the newsletter box. The gap between them is deliberately small: a broadsheet
     separates with rules, not with shadows and boxes. */
  --paper:      #f6f5f1;
  --card:       #fffdf7;
  --surface:    #f0efe9;
  --surface-2:  #e6e3db;
  --line:       #dcdad4;
  --line-strong:#b4b0a6;

  /* ------------------------------------------------------------------ ink */
  --ink:        #2b2824;
  --ink-soft:   #5b5952;
  --muted:      #8a8780;
  --on-dark:    #f6f5f1;
  --on-dark-mut:#c2bdb2;

  /* -------------------------------------------------------------- signals */
  /* Deliberately NOT derived from the brand accent. These mean "urgent" and
     "hazard"; a rebrand must never quietly restyle a road warning.
     Breaking moves from pillar-box #c8102e to a brick red that sits on cream
     without vibrating. It is still the loudest thing on the page, which is the
     whole job. Hazard stays amber and is deliberately NOT the breaking colour:
     a traffic warning and a breaking story must never look identical. */
  --breaking:   #8c3a25;
  --breaking-d: #6e2c1c;
  --hazard:     #c98a12;
  --hazard-dark:#9c6a0b;
  --sun:        #c98a12;
  --positive:   #3f6b4a;
  --info:       #2f5578;

  /* -------------------------------------------------------------- typefaces */
  /* Reversal, made knowingly. In September the paper moved OFF a serif because
     Source Serif + Georgia + condensed caps read as a content farm imitating a
     broadsheet. That diagnosis was about execution, not about serifs: the
     giveaway was the pastiche, not the letterforms. Libre Baskerville is a
     transitional serif drawn for screen text, and here it is paired with one
     grotesque and a hairline grid rather than with condensed capitals, which is
     what a real newspaper actually does.
     Instrument Sans replaces Inter for UI and body: a slightly narrower
     grotesque that holds at 11px label sizes, which is where most of this
     design's furniture lives. */
  --font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-ui:      "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* ----------------------------------------------------------- type scale */
  /* Fluid, so headlines stop needing a hand-written font-size at every
     breakpoint (which is how the mobile lead headline ended up at 37px inside
     a 110px column). Values match the canvas: the lead runs to 52px on a wide
     screen, card headlines sit at 18-19px, furniture at 10-11.5px. */
  --text-xs:   0.6875rem;  /* 11px — kickers, meta, labels */
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-xl:   clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --text-3xl: clamp(2rem, 1.4rem + 2.75vw, 3.25rem);

  /* A serif needs more line than a grotesque at the same size. */
  --leading-tight: 1.12;
  --leading-snug:  1.24;
  --leading-body:  1.62;

  /* Furniture — kickers, section labels, bylines — is the sans in small caps
     with wide tracking. One token so it cannot drift per component. */
  --track-label: 0.14em;
  --track-kicker: 0.18em;

  /* -------------------------------------------------------------- spacing */
  /* The canvas gutters at 26px between columns, which is the rhythm the
     hairlines sit on. --space-5 is that gutter. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 13px;
  --space-4: 18px;
  --space-5: 26px;
  --space-6: 34px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---------------------------------------------------------------- shell */
  --max: 1240px;
  --radius:    0px;   /* a broadsheet has no rounded corners */
  --radius-lg: 2px;
  /* Shadows are how the old card design separated things. This one separates
     with rules, so the shadows are reduced to almost nothing rather than
     removed outright — a few components still call them and would collapse. */
  --shadow-sm: 0 1px 0 rgba(43, 40, 36, .06);
  --shadow:    0 1px 2px rgba(43, 40, 36, .10);
  --shadow-lg: 0 8px 24px rgba(43, 40, 36, .14);

  /* -------------------------------------------- legacy aliases (transitional)
     Older stylesheets still reference these names. They are aliases now, not
     independent values, so nothing can drift away from the palette again.
     Retire them as each stylesheet is migrated; do not add new uses. */
  --accent:      var(--brand-accent);
  --accent-dark: var(--brand-accent-dark);
  --yellow:      var(--brand-accent);      /* held a CYAN value for months */
  --yellow-dark: var(--brand-accent-dark);
  --yellow-deep: var(--brand-accent-dark);
  --navy:        var(--brand-navy);
  --cyan:        var(--brand-accent-lift);
  --black:       var(--brand-navy-deep);
  --red:         var(--breaking);
  --red-bright:  var(--breaking);
  --traffic:     var(--hazard);
  --traffic-dark:var(--hazard-dark);
  --soft:        var(--surface);
  --deep:        var(--surface-2);
  --green:       var(--positive);
  --blue:        var(--info);
  --display:     var(--font-display);
  --sans:        var(--font-body);   /* referenced by editorial-theme; was undefined */
  /* --utility was defined inside editorial-theme.css's own :root and was lost
     when the tokens moved here, leaving 28 rules with no font-family at all.
     It held "Roboto Condensed" -- the condensed newspaper face we are moving
     away from -- so it now points at the UI face rather than being restored. */
  --utility:     var(--font-ui);
  --shadow-legacy: var(--shadow);

  /* Broadsheet additions. New names only — nothing above was renamed. */
  --rule-hair:   1px solid var(--line);
  --rule-ink:    1px solid var(--ink);
  --gutter:      var(--space-5);
}

/* ---------------------------------------------------------------------------
 * Shell corrections that the palette alone cannot make.
 *
 * These live here, in the token file, for one practical reason: Sarah uploads
 * files one at a time through the GitHub web interface, and a rule split across
 * four stylesheets is four uploads and four chances for one to land stale. They
 * are deliberately few, and every one of them is a consequence of the palette
 * change rather than new component design.
 * ------------------------------------------------------------------------- */

/* The page ground. Several older shells set body { background: #fff } locally;
   on a cream palette that leaves a white rectangle behind the content. */
body { background: var(--paper); color: var(--ink); }

/* Headlines carry the serif; furniture carries the sans. Scoped to the classes
   that already exist so no markup changes. */
.lead-headline,
.secondary-headline,
.card-headline,
.section-title,
.rail-title,
.article-title,
.m-section-title,
.card-headline a,
h1.article-headline {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.012em;
}

/* Kickers, bylines, section labels: small, tracked, upper. */
.story-kicker,
.breaking-label,
.section-link,
.story-meta,
.camera-badge,
.air-badge {
  font-family: var(--font-ui);
  letter-spacing: var(--track-label);
}
.story-kicker { text-transform: uppercase; font-size: var(--text-xs); letter-spacing: var(--track-kicker); }

/* Separate with rules, not with boxes. The card look is what made the front
   page read as a feed; a hairline above each story is what makes a column read
   as a newspaper. */
.news-card,
.weekly-local-card,
.static-latest-card {
  background: transparent;
  border: 0;
  border-top: var(--rule-hair);
  border-radius: 0;
  box-shadow: none;
}

/* Section heads sit under a heavier ink rule, the way a printed section front
   announces itself. */
.section-head {
  border-bottom: var(--rule-ink);
}

/* Breaking and traffic bars inherit the new signal colours automatically, but
   both set their own dark ink locally in places. Stated once here. */
.breaking-bar { background: var(--breaking); color: #fdf8f4; }
.traffic-bar  { background: var(--hazard);   color: #221a06; }