/**
 * tokens.css — the ILS design system as custom properties.
 *
 * Everything downstream reads from here. Changing the brand red or the rule
 * colour is a one-line edit in this file, not a search across seven stylesheets.
 *
 * Palette: red accent, white base, near-black chrome, neutral gray scale.
 */

:root {
	/*
	 * Brand. --ils-red is sampled from the ILS lettermark; it is the single
	 * value to change if the brand red is ever adjusted, because every rule,
	 * kicker, underline and button reads it from here.
	 */
	--ils-red: #e8253c;
	--ils-red-dark: #b81528;
	--ils-red-light: #ff4359;

	/*
	 * Chrome. CNN and BBC both put the masthead on near-black rather than on
	 * the brand colour, which keeps the red available for emphasis instead of
	 * spending it on a background.
	 */
	--ils-ink: #0f1419;
	--ils-ink-soft: #1c2530;

	/* Base */
	--ils-white: #ffffff;
	--ils-black: #0a0a0a;
	--ils-near-black: #141414;

	/* Neutral scale — rules, metadata, muted text */
	--ils-gray-100: #f5f5f5;
	--ils-gray-200: #e6e6e6;
	--ils-gray-300: #d1d1d1;
	--ils-gray-400: #a8a8a8;
	--ils-gray-500: #767676; /* Lightest gray passing AA on white for body text */
	--ils-gray-600: #545454;
	--ils-gray-700: #333333;

	/* Semantic assignments */
	--ils-bg: var(--ils-white);
	--ils-fg: var(--ils-near-black);
	--ils-fg-muted: var(--ils-gray-500);
	--ils-rule: var(--ils-gray-200);
	--ils-rule-strong: var(--ils-gray-300);
	--ils-chrome-bg: var(--ils-ink);
	--ils-chrome-fg: var(--ils-white);
	--ils-chrome-rule: rgba(255, 255, 255, 0.16);
	--ils-link: var(--ils-near-black);
	--ils-link-hover: var(--ils-red);

	/* Surfaces used by ads, the newsletter block and the account pages */
	--ils-surface: var(--ils-gray-100);
	--ils-surface-ink: #f2f4f7;

	/* Live indicators */
	--ils-live: var(--ils-red);
	--ils-up: #0a7d33;
	--ils-down: #c31f1f;

	/*
	 * Type.
	 *
	 * Headlines are set in BBC Reith Serif (self-hosted, see fonts.css); body
	 * copy, metadata and all UI chrome stay on the system sans stack, which
	 * costs nothing to load and renders on first paint.
	 *
	 * Georgia leads the fallback deliberately: it is metrically close enough to
	 * Reith that a headline does not visibly resize when the webfont arrives.
	 *
	 * --ils-font-serif is the ONE place the heading face is named. Swapping to
	 * a different licensed serif is a single-line edit here.
	 */
	--ils-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--ils-font-serif: "BBC Reith Serif", Georgia, Cambria, "Times New Roman",
		Times, serif;

	/* Heading weight. 600 is not a real Reith weight and resolves to 700. */
	--ils-weight-heading: 700;

	/* Type scale — dense by design, tight leading on headlines */
	--ils-fs-xs: 0.6875rem;   /* 11px — kickers, timestamps */
	--ils-fs-sm: 0.8125rem;   /* 13px — card meta */
	--ils-fs-base: 0.9375rem; /* 15px — card headlines, UI */
	--ils-fs-md: 1.0625rem;   /* 17px — article body */
	--ils-fs-lg: 1.375rem;    /* 22px — rail headings */
	--ils-fs-xl: 1.75rem;     /* 28px — hero headline (mobile) */
	--ils-fs-2xl: 2.25rem;    /* 36px — hero headline (desktop) */
	--ils-fs-3xl: 2.75rem;    /* 44px — article title (desktop) */

	--ils-lh-tight: 1.15;
	--ils-lh-snug: 1.3;
	--ils-lh-normal: 1.5;
	--ils-lh-relaxed: 1.65;

	/* Spacing — 4px base */
	--ils-sp-1: 0.25rem;
	--ils-sp-2: 0.5rem;
	--ils-sp-3: 0.75rem;
	--ils-sp-4: 1rem;
	--ils-sp-5: 1.5rem;
	--ils-sp-6: 2rem;
	--ils-sp-7: 3rem;

	/* Layout */
	--ils-max-width: 1280px;
	--ils-gutter: var(--ils-sp-4);
	--ils-sidebar-width: 300px;

	/*
	 * Borders and focus.
	 *
	 * The design is built on lines, not filled bars: no solid black section
	 * headers, no coloured blocks behind labels, no dark panels. Separation
	 * comes from hairlines and whitespace, which is what lets a page carrying
	 * seventy headlines still read as calm.
	 *
	 * --ils-rule-section is the one slightly heavier line, used above a section
	 * heading so the eye can find where one block ends and the next begins.
	 */
	--ils-border-hairline: 1px solid var(--ils-rule);
	--ils-rule-section: 1px solid var(--ils-gray-300);
	--ils-accent-line: 2px solid var(--ils-red);
	--ils-focus-ring: 2px solid var(--ils-red);
	--ils-focus-offset: 2px;

	/* Motion — respected only when the user has not asked for less */
	--ils-transition: 120ms ease-out;

	/* Z-index scale */
	--ils-z-header: 100;
	--ils-z-panel: 200;
	--ils-z-skip: 300;
}

@media (min-width: 48em) {
	:root {
		--ils-gutter: var(--ils-sp-5);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ils-transition: 0ms;
	}
}