/* =============================================================================
   Black Star News — design tokens
   =============================================================================
   The single source of truth for colour, type, spacing and layout. Every other
   stylesheet reads from here and defines no raw values of its own.

   Values were extracted by frequency from the approved design set, so these are
   the system's real values rather than an interpretation of them.

   theme.json declares the same palette and type scale to the block editor. When
   a value changes it must change in BOTH files — theme.json for the editor,
   this file for the front end. They are kept adjacent in review for that reason.
   ========================================================================== */

:root {
	/* --- Colour ---------------------------------------------------------- */
	/* Brass is the accent, at 542 uses the most-used colour in the design. */
	--bsn-brass: #A9873E;
	--bsn-brass-light: #C9A75C;
	--bsn-brass-deep: #8A6D2F;

	/*
	 * Brass for SMALL TEXT on light grounds.
	 *
	 * The design's brass (#A9873E) measures 3.16:1 on the page ground and 2.97:1
	 * on the band. That is fine for the 62px masthead star, where WCAG 1.4.3 asks
	 * 3:1 for large text — but eyebrows, section labels, roles and rank numerals
	 * are 11-22px, which needs 4.5:1. They were failing.
	 *
	 * #83652B measures 5.09:1 on the page, 4.78:1 on the band and 5.44:1 on white:
	 * comfortably clear with margin, and still unmistakably brass rather than
	 * brown. The lighter brass keeps every non-text use — borders, chips, button
	 * grounds, the wordmark star — so the design's character is unchanged.
	 *
	 * On dark grounds --bsn-brass-light is used instead, at 8.16:1.
	 */
	--bsn-brass-text: #83652B;

	--bsn-ink: #141210;          /* Body text, masthead, footer ground */
	--bsn-ink-soft: #3E3A33;
	--bsn-ink-muted: #6E675C;    /* Deks, bylines, metadata */
	--bsn-ink-faint: #8A8172;
	--bsn-ink-fainter: #9A9184;  /* Captions and credits */

	--bsn-page: #FAF7F1;         /* Warm page ground */
	--bsn-band: #F4F0E6;         /* Alternating section band */
	--bsn-surface: #FFFFFF;      /* Cards on a band */
	--bsn-band-soft: #F0EBDF;

	--bsn-rule: #E3DCCD;         /* Hairline rules */
	--bsn-rule-soft: #DDD5C2;
	--bsn-rule-strong: #C9BFA9;

	/* Dark contexts: the Investigations band, newsletter and footer. */
	--bsn-dark: #14120E;
	--bsn-dark-raised: #1E1B15;
	--bsn-on-dark: #F5F1E8;
	--bsn-on-dark-muted: #B8AE9C;
	--bsn-rule-dark: #3A352B;

	/* Sponsored and partner labels need to be unmistakable, not decorative. */
	/*
	 * Search-match highlight, from the approved Search design. Distinct from
	 * --bsn-sponsored-bg on purpose: that tone measured 1.07:1 against the page and
	 * a highlight nobody can see is not a highlight. This is 1.18:1 — still pale,
	 * which a highlight behind body text has to be, but visibly warmer.
	 */
	--bsn-highlight: #EFE3C2;

	--bsn-sponsored-bg: #F5EFDF;
	--bsn-sponsored-rule: #D9CBA4;

	/* --- Type ------------------------------------------------------------ */
	--bsn-font-serif: Newsreader, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", Georgia, serif;
	--bsn-font-sans: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/*
	 * Fluid scale. clamp() rather than breakpoints so headline sizes are
	 * continuous — a 140-character headline on a 390px phone needs to shrink
	 * smoothly, not step at an arbitrary width.
	 */
	--bsn-text-2xs: 0.6875rem;   /* 11px — eyebrows, credits */
	--bsn-text-xs: 0.75rem;      /* 12px — labels, timestamps */
	--bsn-text-sm: 0.8125rem;    /* 13px — bylines, nav */
	--bsn-text-base: 0.9375rem;  /* 15px — card deks */
	--bsn-text-body: 1.0625rem;  /* 17px — article body */
	--bsn-text-md: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
	--bsn-text-lg: clamp(1.1875rem, 0.7vw + 1rem, 1.4375rem);
	--bsn-text-xl: clamp(1.375rem, 1.2vw + 1rem, 1.875rem);
	--bsn-text-2xl: clamp(1.625rem, 2vw + 1rem, 2.375rem);
	--bsn-text-3xl: clamp(1.875rem, 3.2vw + 1rem, 3.25rem);
	--bsn-text-4xl: clamp(2.25rem, 4.6vw + 1rem, 4rem);

	--bsn-leading-tight: 1.08;   /* Display headlines */
	--bsn-leading-snug: 1.22;    /* Card headlines */
	--bsn-leading-normal: 1.45;
	--bsn-leading-body: 1.66;    /* Article prose */

	--bsn-tracking-tight: -0.014em;
	--bsn-tracking-normal: 0;
	--bsn-tracking-wide: 0.06em;
	--bsn-tracking-label: 0.14em; /* Uppercase eyebrows and section heads */

	--bsn-weight-regular: 400;
	--bsn-weight-medium: 500;
	--bsn-weight-semibold: 600;
	--bsn-weight-bold: 700;
	--bsn-weight-black: 800;

	/* --- Spacing --------------------------------------------------------- */
	--bsn-space-3xs: 0.25rem;
	--bsn-space-2xs: 0.5rem;
	--bsn-space-xs: 0.75rem;
	--bsn-space-sm: 1rem;
	--bsn-space-md: 1.5rem;
	--bsn-space-lg: 2.25rem;
	--bsn-space-xl: 3rem;
	--bsn-space-2xl: 4rem;
	--bsn-space-3xl: 5.5rem;

	/* --- Component type scale, measured from the approved design ---------
	 * These are the design's literal values. They live here rather than in
	 * component CSS so the masthead cannot drift from the nav, and so a change
	 * to the editorial voice is one edit.
	 */
	--bsn-wordmark-size: clamp(2rem, 7.2vw, 3.875rem); /* 32px -> 62px */
	--bsn-wordmark-star: 0.68em;                       /* 42px at 62px */
	--bsn-wordmark-tracking: 0.015em;
	--bsn-tagline-size: 0.6875rem;                     /* 11px */
	--bsn-tagline-tracking: 0.18em;
	--bsn-utility-size: 0.6875rem;                     /* 11px */
	--bsn-utility-tracking: 0.06em;
	--bsn-nav-size: 0.71875rem;                        /* 11.5px */
	--bsn-nav-tracking: 0.08em;
	--bsn-section-label-tracking: 0.2em;

	/* --- Header dimensions ----------------------------------------------- */
	--bsn-utility-pad-y: 0.5rem;                       /* 8px */
	--bsn-utility-min-h: 2.125rem;
	--bsn-masthead-pad-top: clamp(1.25rem, 3vw, 2rem);
	--bsn-masthead-pad-bottom: clamp(1rem, 2.2vw, 1.375rem);
	--bsn-nav-pad-y: 0.375rem;                         /* 6px */
	--bsn-nav-min-h: 2.875rem;                         /* 46px */
	--bsn-mobile-header-h: 3.25rem;

	/* --- Breakpoints -----------------------------------------------------
	 * Reference values only. CSS cannot use a custom property inside a media
	 * query, so the numbers are repeated literally in @media rules — these
	 * exist so there is one documented source of truth for what they mean, and
	 * a grep target when one changes.
	 *
	 *   sm  40rem / 640px  — two-column card grids
	 *   md  48rem / 768px  — tablet; article figures break out
	 *   lg  60rem / 960px  — desktop nav replaces the drawer
	 *   xl  80rem / 1280px — full page container
	 */
	--bsn-bp-sm: 40rem;
	--bsn-bp-md: 48rem;
	--bsn-bp-lg: 60rem;
	--bsn-bp-xl: 80rem;

	/* --- Layout ---------------------------------------------------------- */
	--bsn-width-page: 1280px;    /* Outer container, from the design */
	--bsn-width-wide: 1080px;    /* Article figures — breakout width */
	--bsn-width-text: 720px;     /* Article prose measure, ~68 characters */
	--bsn-width-narrow: 560px;   /* Newsletter and form copy */
	--bsn-gutter: clamp(1rem, 4vw, 2rem);

	/* --- Effects --------------------------------------------------------- */
	--bsn-hairline: 1px solid var(--bsn-rule);
	--bsn-hairline-dark: 1px solid var(--bsn-rule-dark);
	--bsn-focus-ring: 2px solid var(--bsn-brass);
	--bsn-focus-offset: 2px;

	/*
	 * Durations are short on purpose. A newsroom interface should feel
	 * instantaneous; anything over ~200ms on a menu reads as lag.
	 */
	--bsn-duration-fast: 120ms;
	--bsn-duration: 180ms;
	--bsn-ease: cubic-bezier(0.2, 0, 0.3, 1);

	/* --- Z-index scale --------------------------------------------------- */
	/* Named so no one has to guess whether 9999 is above 1000. */
	--bsn-z-base: 1;
	--bsn-z-sticky-nav: 60;
	--bsn-z-drawer: 80;
	--bsn-z-skip-link: 100;

	/*
	 * Reserved ad heights. Set as tokens so a slot reserves its space in CSS
	 * before any ad script runs — the single biggest CLS source on a news page.
	 */
	--bsn-ad-leaderboard-h: 90px;
	--bsn-ad-leaderboard-h-lg: 250px;
	--bsn-ad-mrec-h: 250px;
	--bsn-ad-in-article-h: 250px;
}

/*
 * The design is a single deliberate visual world: warm cream paper, brass, and a
 * near-black ink. It is not theme-switchable, and a dark-mode inversion of a
 * newspaper masthead would be a different publication. So there is no
 * prefers-color-scheme block — the palette above is the palette, and every
 * surface paints its own background and colour explicitly.
 *
 * What IS honoured is prefers-reduced-motion and prefers-contrast; see base.css.
 */