/**
 * tokens.css  design tokens (brand-spec.md) + theme-aware content + chrome.
 *
 * html[data-theme] flips page content tokens and header/footer chrome.
 * All page heroes use fixed --hero-* tokens (never flip).
 * Dark theme stays night-only: no light/white content bands.
 */

:root {
	/* Brand accents (fixed) */
	--accent: #e8543a;
	--accent-hover: #d8412a;
	--accent-sports: #ff6a2b;
	--accent-body: #c43a8e;
	--accent-animal: #2e9d68;
	--accent-neo: #7b5be6;

	/* Locked hero palette (all page heroes  never flips with theme) */
	--hero-bg: #08080b;
	--hero-fg: #f5f5f7;
	--hero-muted: #a2a2ab;
	--hero-muted-2: #8f8f98;
	--hero-border: rgba(255, 255, 255, 0.1);
	--hero-grid-line: rgba(255, 255, 255, 0.022);
	--hero-cta-bg: #f5f5f3;
	--hero-cta-fg: #0a0a0d;

	/* Type */
	--font-sans:
		'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,
		sans-serif;
	--font-mono:
		'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	/* Radii / shape */
	--radius-pill: 999px;
	--radius-card: 16px;
	--radius-sm: 10px;

	/* Rhythm */
	--maxw: 1240px;
	--maxw-narrow: 1160px;
	--section-y: clamp(56px, 8vw, 104px);
	--pad-x: clamp(20px, 4vw, 32px);

	/* Focus */
	--focus: rgba(232, 84, 58, 0.55);

	/* Gradient flourish */
	--grad-core: linear-gradient(120deg, #ff7a45, #c43a8e, #7b5be6);
}

/* ---- Content + chrome tokens: DARK (default) ---- */
:root,
:root[data-theme='dark'] {
	--bg: #08080b;
	--surface: #0f0f14;
	--surface-2: #15151a;
	--fg: #f5f5f7;
	--muted: #a2a2ab;
	--muted-2: #8f8f98;
	--border: rgba(255, 255, 255, 0.1);
	--border-dark: rgba(255, 255, 255, 0.1);
	--card: #1a1a1f;
	--card-2: #121218;
	--fill-subtle: rgba(255, 255, 255, 0.04);
	--fill-muted: rgba(255, 255, 255, 0.06);
	--section-contrast: #08080b;
	--section-contrast-fg: #ededf0;
	--section-contrast-muted: #a2a2ab;
	--section-contrast-muted-2: #8f8f98;
	--section-contrast-border: rgba(255, 255, 255, 0.1);
	--contrast-grid-line: rgba(255, 255, 255, 0.022);

	--hdr-bar-bg: rgba(8, 8, 11, 0.92);
	--hdr-bar-border: rgba(255, 255, 255, 0.08);
	--hdr-muted: #a3a3ac;
	--hdr-active: #f0f0f2;
	--hdr-chip-bg: rgba(255, 255, 255, 0.06);
	--hdr-chip-border: rgba(255, 255, 255, 0.14);
	--hdr-chip-fg: #e8e8ec;
	--hdr-cta-bg: #f5f5f3;
	--hdr-cta-bg-hover: #ffffff;
	--hdr-cta-fg: #0a0a0d;
	--hdr-panel-bg: rgba(8, 8, 11, 0.98);
	--hdr-focus: rgba(232, 84, 58, 0.55);

	--ftr-bg: #08080b;
	--ftr-fg: #a2a2ab;
	--ftr-link: #b4b4bc;
	--ftr-link-active: #f0f0f2;
	--ftr-muted: #8f8f98;
	--ftr-label: #6e6e77;
	--ftr-border: rgba(255, 255, 255, 0.07);
	--ftr-social-border: rgba(255, 255, 255, 0.13);
	--ftr-social-bg: rgba(255, 255, 255, 0.03);
	--ftr-social-fg: #a2a2ab;
	--ftr-tagline: #c7c7ce;
	--ftr-watermark-opacity: 0.055;

	--logo-dark-display: block;
	--logo-light-display: none;
}

/* ---- Content + chrome tokens: LIGHT ---- */
:root[data-theme='light'] {
	--bg: #fbfbfa;
	--surface: #fbfbfa;
	--surface-2: #f3f2ef;
	--fg: #121215;
	--muted: #5e5e66;
	--muted-2: #a2a2ab;
	--border: rgba(18, 18, 21, 0.1);
	--border-dark: rgba(255, 255, 255, 0.1);
	--card: #ffffff;
	--card-2: #f7f6f3;
	--fill-subtle: rgba(18, 18, 21, 0.04);
	--fill-muted: rgba(18, 18, 21, 0.05);
	--section-contrast: #08080b;
	--section-contrast-fg: #ededf0;
	--section-contrast-muted: #a2a2ab;
	--section-contrast-muted-2: #8f8f98;
	--section-contrast-border: rgba(255, 255, 255, 0.1);
	--contrast-grid-line: rgba(255, 255, 255, 0.022);

	--hdr-bar-bg: rgba(251, 251, 250, 0.92);
	--hdr-bar-border: rgba(18, 18, 21, 0.08);
	--hdr-muted: #5e5e66;
	--hdr-active: #121215;
	--hdr-chip-bg: rgba(18, 18, 21, 0.04);
	--hdr-chip-border: rgba(18, 18, 21, 0.12);
	--hdr-chip-fg: #121215;
	--hdr-cta-bg: #121215;
	--hdr-cta-bg-hover: #1e1e24;
	--hdr-cta-fg: #fbfbfa;
	--hdr-panel-bg: rgba(251, 251, 250, 0.98);
	--hdr-focus: rgba(232, 84, 58, 0.45);

	--ftr-bg: #f5f5f3;
	--ftr-fg: #5e5e66;
	--ftr-link: #3a3a42;
	--ftr-link-active: #121215;
	--ftr-muted: #6e6e77;
	--ftr-label: #8a8a92;
	--ftr-border: rgba(18, 18, 21, 0.08);
	--ftr-social-border: rgba(18, 18, 21, 0.12);
	--ftr-social-bg: rgba(18, 18, 21, 0.03);
	--ftr-social-fg: #3a3a42;
	--ftr-tagline: #121215;
	--ftr-watermark-opacity: 0.04;

	--logo-dark-display: none;
	--logo-light-display: block;
}