/* ============================================================
   CORBIN REDHOUNDS DESIGN TOKENS
   Every value below was derived from the approved homepage concept
   (1024px artboard, scaled x1.4 to a 1440 desktop). Change it here,
   never inline. Zero radius is a rule, not a default.
   ============================================================ */

@layer tokens, base, layout, components, utilities;

@layer tokens {
	:root {
		/* ---- Color ---- */
		--red: #ce1a27;
	--red-display: #d4192b; /* optically brightened crimson for large type on dark photos; same family as --red */              /* logo, headline accent, dates, kickers */
		--red-deep: #ac141d;         /* quick access cards */
		--red-btn: #bc1722;          /* primary buttons */
		--red-btn-dark: #a10103;     /* read more on dark cards */
		--red-btn-hover: #d9202f;

		--black: #0e100f;            /* header, footer */
		--black-deep: #08080a;       /* lead story card floor */
		--black-panel: #151616;      /* rail header */
		--black-hero: #0a0a0c;

		--white: #f5f6f7;            /* rail cards */
		--white-card: #ffffff;       /* secondary story cards */
		--white-text: #f2f2f2;       /* type on dark */

		--gray-section: #eef0f2;     /* news section background */
		--gray-section-2: #e5e8ec;   /* quick access section background */
		--gray-line: #d3d7dc;        /* hairlines on light */
		--gray-ink: #1a1a1a;         /* headline ink on light */
		--gray-body: #3c3c3c;        /* body ink on light */
		--gray-meta: #6b6b6b;        /* meta ink on light */

		--on-dark-muted: rgba(255, 255, 255, 0.62);
		--on-dark-faint: rgba(255, 255, 255, 0.28);
		--on-dark-line: rgba(255, 255, 255, 0.18);

		/* ---- Overlays (intentional, per section; never a global filter) ---- */
		--overlay-hero-vignette: linear-gradient(90deg, rgba(8, 8, 10, 0.78) 0%, rgba(8, 8, 10, 0.45) 28%, rgba(8, 8, 10, 0) 55%);
		--overlay-hero-floor: linear-gradient(180deg, rgba(8, 8, 10, 0.12) 0%, rgba(8, 8, 10, 0) 35%, rgba(8, 8, 10, 0.55) 100%);
		--overlay-hero-mobile: linear-gradient(180deg, rgba(8, 8, 10, 0.25) 0%, rgba(8, 8, 10, 0) 30%, rgba(8, 8, 10, 0.55) 60%, rgba(8, 8, 10, 0.92) 100%);
		--overlay-card-floor: linear-gradient(180deg, rgba(8, 8, 10, 0) 40%, rgba(8, 8, 10, 0.72) 68%, var(--black-deep) 100%);
		--overlay-panorama: linear-gradient(180deg, rgba(14, 16, 15, 0.35) 0%, rgba(14, 16, 15, 0.15) 45%, rgba(14, 16, 15, 0.75) 82%, var(--black) 100%);
		--overlay-panorama-warm: linear-gradient(180deg, rgba(206, 26, 39, 0) 55%, rgba(206, 26, 39, 0.18) 100%);

		/* ---- Type ---- */
		--font-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
		--font-serif: "Lora", Georgia, "Times New Roman", serif;

		/* Fluid sizes: mobile floor -> 1440 ceiling */
		--fs-hero: clamp(3.75rem, 8.1vw, 7.5rem);      /* 60 -> 120 */
		--fs-h1: clamp(2.5rem, 4.4vw, 4rem);           /* 40 -> 64 */
		--fs-h2: clamp(2rem, 3.3vw, 3rem);             /* 32 -> 48  lead story */
		--fs-h3: clamp(1.25rem, 1.6vw, 1.5rem);        /* 20 -> 24  lead subhead, quote */
		--fs-h4: clamp(1.125rem, 1.4vw, 1.25rem);      /* 18 -> 20  secondary headline */
		--fs-body: clamp(0.9375rem, 1.1vw, 1rem);      /* 15 -> 16 */
		--fs-small: clamp(0.875rem, 1.1vw, 1rem);      /* 14 -> 16  rail opponent, sub-copy */
		--fs-ui: clamp(0.8125rem, 1.05vw, 0.9375rem);  /* 13 -> 15  nav, buttons */
		--fs-label: clamp(0.75rem, 0.9vw, 0.8125rem);  /* 12 -> 13  kickers, meta */
		--fs-micro: clamp(0.6875rem, 0.8vw, 0.75rem);  /* 11 -> 12  utility, footer links */

		--fw-black: 900;
		--fw-extra: 800;
		--fw-bold: 700;
		--fw-semi: 600;
		--fw-medium: 500;

		--ls-tight: -0.01em;
		--ls-ui: 0.1em;
		--ls-label: 0.2em;
		--ls-wide: 0.35em;
		--ls-mark: 0.5em;

		--lh-display: 0.92;
		--lh-tight: 1.1;
		--lh-ui: 1.2;
		--lh-body: 1.55;
		--lh-serif: 1.6;

		/* ---- Layout ---- */
		--container: 1400px;
		--container-fluid: 95%;
		--gutter: 24px;
		--rail-offset: 12px;         /* gap between hero floor and rail; negative value overlaps */
		--section-gap: 24px;

		/* ---- Spacing scale ---- */
		--sp-1: 4px;
		--sp-2: 8px;
		--sp-3: 12px;
		--sp-4: 16px;
		--sp-5: 24px;
		--sp-6: 32px;
		--sp-7: 48px;
		--sp-8: 64px;
		--sp-9: 96px;
		--sp-10: 128px;

		--pad-card: 16px;
		--pad-hero: 24px;

		/* ---- Chrome ---- */
		--utility-h: 40px;
		--masthead-h: 72px;
		--masthead-h-compact: 60px;
		--nav-rule: 3px;             /* the red rule under the masthead */

		--bw-hair: 1px;
		--bw-accent: 2px;
		--bw-rule: 3px;

		--radius: 0;                 /* design DNA: never rounded */

		--btn-sm: 36px;
		--btn-md: 44px;
		--btn-lg: 52px;

		--shadow-float: 0 12px 32px rgba(0, 0, 0, 0.28);
		--shadow-card: 0 2px 10px rgba(0, 0, 0, 0.06);

		/* ---- Image ratios ---- */
		--ratio-hero: 2.08 / 1;
		--ratio-hero-mobile: 4 / 5;
		--ratio-lead: 4 / 3;
		--ratio-card: 3 / 2;
		--ratio-quick: 16 / 9;
		--ratio-panorama: 6.1 / 1;
		--ratio-panorama-mobile: 3 / 2;
		--ratio-logo: 1 / 1;

		/* ---- Motion ---- */
		--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
		--dur: 180ms;
	}

	@media (min-width: 768px) {
		:root {
			--gutter: 32px;
			--section-gap: 24px;
			--pad-card: 20px;
			--pad-hero: 40px;
			--utility-h: 44px;
			--masthead-h: 84px;
		}
	}

	@media (min-width: 1024px) {
		:root {
			--gutter: 40px;
			--pad-card: 24px;
			--pad-hero: 56px;
			--utility-h: 48px;
			--masthead-h: 92px;
			--masthead-h-compact: 64px;
		}
	}

	/* Breakpoints (documented; CSS cannot read custom properties in media queries):
	   480  single column
	   768  two columns, rail arrows appear
	   1024 full header, news grid 58/42
	   1280 six-across quick cards
	   1440 container caps */
}