/*
 * Design tokens.
 *
 * Every colour, size and timing in the site resolves here. Nothing else in
 * the theme writes a raw hex value, so a brand decision is one line, once.
 *
 * Source of each value is named in the comment beside it. Where the brand
 * book and the design files disagreed, the design file won (decision
 * 12.10.2026): all eleven design files agree on the same navy and the same
 * orange, and the orange carries two roles rather than one.
 */

:root {

	/* ---- Brand, from the design files -------------------------------- */
	/*
	 * The orange is two colours doing two jobs, which is how every design
	 * file draws it and why reducing it to one made every button and every
	 * // on the site read a shade too faded:
	 *   --c-orange        fills. Buttons, the // in a heading, hovers.
	 *   --c-orange-border outlines. The 1px edge around a filled button.
	 * The brand book's own p.17 swatch is #F58345, one digit from the fill.
	 */

	--c-blue:          #0F2546;  /* headings, body text, footer background */
	--c-orange:        #F58344;  /* the action colour, filled */
	--c-orange-border: #EA8E56;  /* the same orange as an outline. RGB
	                                234/142/86, Pantone 164 C, RAL 2003 */
	--c-sky:           #BDCCD4;
	--c-warm-200:      #D6D6D3;
	--c-warm-400:      #B8B9B6;
	--c-warm-600:      #918E81;

	/* ---- Functional, from the design files --------------------------- */
	/* The brand book is a print palette and names no role for these.     */

	--c-text-muted:  #4B5C74;  /* secondary text only, never a heading */
	--c-rule:        #D5DBE3;  /* hairline between list items */
	--c-surface:     #F1F1F1;  /* card and banner backgrounds */
	--c-white:       #FFFFFF;

	/* ---- Roles ------------------------------------------------------- */
	/* Templates reach for these, not for the raw brand names above.      */

	--text:          var(--c-blue);
	--text-soft:     var(--c-text-muted);
	--text-invert:   var(--c-white);
	--accent:        var(--c-orange);
	--accent-edge:   var(--c-orange-border);
	--page:          var(--c-white);
	--surface:       var(--c-surface);
	--rule:          var(--c-rule);
	--footer-bg:     var(--c-blue);

	/* ---- Type -------------------------------------------------------- */

	--font: "Ploni ML v2 AAA", "Assistant", system-ui, sans-serif;

	--w-light:     300;
	--w-regular:   400;
	--w-medium:    500;
	--w-demibold:  600;
	--w-bold:      700;
	--w-ultrabold: 800;
	--w-black:     900;

	--fs-body:      18px;
	--fs-meta:      16px;
	--fs-h2:        30px;  /* every // heading on the site, no small variant */
	--fs-h3:        22px;
	--fs-card-title: 20px;
	--lh-body:      1.7;
	--lh-tight:     1.25;

	/* ---- Rhythm ------------------------------------------------------ */
	/*
	 * One gutter for the whole page, the top bar included, so nothing ever
	 * sits a few pixels off the column everything else lines up with.
	 */

	--gutter: clamp(20px, 11vw, 209px);

	/*
	 * The home page is drawn inside a measured column rather than against
	 * the gutter alone: 1462px of a 1920 comp, with the hero's own 11%
	 * margin as the floor. Inner pages have no cap and use the gutter only.
	 */
	--container: 1462px;

	--space-xs:  8px;
	--space-sm:  16px;
	--space-md:  24px;
	--space-lg:  40px;
	--space-xl:  64px;
	--space-2xl: 96px;

	--measure: 760px;   /* reading width inside the main column */
	--media:   560px;   /* main column media, and anything aligned to it */
	--aside:   300px;   /* side column, sized to a 300x250 sponsor banner */

	/* ---- Motion ------------------------------------------------------ */

	--ease:     cubic-bezier(.65, 0, .35, 1);
	--dur:      0.45s;
	--dur-fast: 0.25s;

	/* ---- Header ------------------------------------------------------ */
	/* Expressed against the 1920 design so it scales with the viewport.  */

	--header-h:          calc(145 * var(--u));
	--header-h-scrolled: calc(120 * var(--u));
	--logo-w:            calc(159 * var(--u));
	--logo-w-scrolled:   calc(140 * var(--u));

	/* ---- Controls ---------------------------------------------------- */

	--btn-h:      54px;
	--btn-h-sm:   50px;
	--icon-btn:   52px;
	--share-btn:  46px;
	--radius:     0;  /* square by default. Circles are opt-in, per screen. */

	/* ---- Elevation --------------------------------------------------- */
	/*
	 * Three shadows, all cast by the brand navy rather than black, so they
	 * read as the page's own depth and not as grey smoke.
	 */

	--shadow-header:  0 6px 24px rgba(15, 37, 70, .08);
	--shadow-play:    0 10px 26px rgba(15, 37, 70, .35);
	--shadow-float:   0 24px 48px rgba(15, 37, 70, .20);

	/*
	 * The hero's cursor glow. Two stops of the action colour at low alpha.
	 * Written here rather than in the block, because it is the one place
	 * the theme is allowed to name a colour channel by hand.
	 */
	--glow-core: rgba(245, 131, 68, .16);
	--glow-edge: rgba(245, 131, 68, .08);

	/* A divider inside the navy footer. Expressed as white at low opacity
	 * so it keeps working if the navy is ever retuned. */
	--rule-invert: rgba(255, 255, 255, .18);

	/* ---- Aspect ratios, named where the design names them ------------ */

	--ratio-episode: 467 / 261;
	--ratio-article: 512 / 341;
	--ratio-banner:  300 / 250;
}

/*
 * The header is specified against a 1920 comp and a 390 comp, so its sizes
 * are written as those pixel counts times a unit that tracks the viewport.
 * This keeps the proportions the design was drawn at instead of guessing a
 * clamp that happens to pass through both ends.
 */
:root { --u: min(1.0089px, calc(100vw / 1903)); }

@media (max-width: 1023px) {
	:root {
		--u: min(calc(100vw / 390), 1.6px);
		/* The hero is drawn against two comps and names them apart, so its
		 * mobile rules read --m while the desktop ones read --u. */
		--m: var(--u);
		/* The bar and the mark are drawn against the 390 comp, and the mark
		 * loses the words, so both take their own numbers here rather than
		 * scaling the desktop ones down. */
		--header-h:          calc(78 * var(--u));
		--header-h-scrolled: calc(64 * var(--u));
		--logo-w:            calc(87 * var(--u));
		--logo-w-scrolled:   calc(80 * var(--u));
	}
}

@media (max-width: 1279px) { :root { --gutter: clamp(20px, 6vw, 96px); } }
@media (max-width: 1023px) { :root { --gutter: clamp(20px, 5vw, 48px); } }
@media (max-width:  767px) {
	:root {
		--gutter: 20px;
		--fs-h2: 25px;
		--fs-body: 17px;
	}
}

/*
 * Anyone who has asked their system to calm down gets a still site. The
 * scroll-driven header and the GSAP signature both read this.
 */
@media (prefers-reduced-motion: reduce) {
	:root { --dur: 0.01s; --dur-fast: 0.01s; }
}