/* ============================================================
   StarsSutra — Design Tokens (FINAL, red/white/black system)
   Locked per build spec v3. No other hues may appear anywhere.
   ============================================================ */
:root {
	/* Surfaces */
	--bg-1: #0A0506;
	--bg-2: #100708;
	--bg-3: #160709;

	/* Text */
	--text-1: #ffffff;
	--text-2: rgba(255, 255, 255, 0.7);
	--text-3: rgba(255, 255, 255, 0.6);
	--text-4: rgba(255, 255, 255, 0.5);

	/* Reds */
	--red: #C8102E;
	--red-hover: #A50D26;
	--red-soft: #FF4D5C;
	--red-soft-hover: #FF7A85;

	/* Cards */
	--card-border: rgba(255, 255, 255, 0.08);
	--card-border-hover: rgba(255, 77, 92, 0.5);
	--card-fill: rgba(255, 255, 255, 0.03);
	--card-gradient: linear-gradient(160deg, rgba(200, 16, 46, 0.14), rgba(255, 255, 255, 0.02));
	--chip-bg: rgba(255, 77, 92, 0.14);
	--divider: rgba(255, 255, 255, 0.06);

	/* Radii */
	--radius-card: 20px;
	--radius-card-sm: 16px;
	--radius-tile: 14px;
	--radius-pill: 999px;

	/* Layout */
	--nav-h: 96px;
	--section-pad-y: 140px;
	--section-pad-x: 64px;
	--content-max: 1440px;
	--content-narrow: 1200px;
	--content-prose: 820px;

	/* Type */
	--font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--h1-hero: 64px;
	--h2: clamp(2rem, 3vw, 2.75rem);
	--h2-lg: clamp(2.25rem, 3.5vw, 3.25rem);
	--h2-cta: clamp(2.25rem, 4vw, 3.5rem);

	/* Motion */
	--ease: cubic-bezier(0.25, 0.1, 0.25, 1);
	--t-fast: 0.2s;
	--t-med: 0.3s;
	--t-slow: 0.35s;

	/* Shadow */
	--btn-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}