/* Genesis Impact Studios — design system tokens, ported verbatim from the
   Claude Design handoff (repo/design_handoff_genesis_site/ds/tokens/*.css).
   Load this before custom.css. Never hardcode a value that has a token here. */

:root {
	/* Ink */
	--ink-1000: #000000; --ink-950: #0a0a0a; --ink-900: #121110; --ink-850: #191716;
	--ink-800: #232120; --ink-700: #333130; --ink-600: #4a4746; --ink-500: #6b6867;

	/* Gold — the "story" half */
	--gold-100: #fbe9b6; --gold-200: #f0d99a; --gold-300: #e5c777; --gold-400: #d8b456;
	--gold-500: #cba43a; --gold-600: #ba9532; --gold-700: #aa862b; --gold-800: #8a6b22; --gold-900: #49340d;

	/* Silver — the "record" half */
	--silver-100: #f2f2f2; --silver-200: #d6d6d6; --silver-300: #b4b4b4; --silver-400: #9a9a9a;
	--silver-500: #7a7a7a; --silver-600: #585857;

	/* Suite — the cool half */
	--suite-1000: #050b17; --suite-900: #071525; --suite-800: #0e3745; --suite-700: #13414e;
	--suite-600: #174755; --suite-500: #184966; --suite-400: #2d6fa8;
	--suite-300: #4fa8c7; --suite-200: #8fd0e0; --suite-100: #c5e7ec;

	/* Dossier — warm paper half (reserved, not used in this build yet) */
	--paper-100: #f4ebd8; --paper-200: #e8dcbf; --paper-300: #d3cba7;
	--paper-400: #b9ae87; --paper-500: #8c8262;

	/* Signal */
	--signal-audio: #4fd1a5; --signal-render: #a8bf3c; --signal-redline: #b03a2e; --signal-record: #e0453a;

	/* Semantic surfaces */
	--surface-page: var(--ink-950);
	--surface-raised: var(--ink-900);
	--surface-card: #141312;
	--surface-inset: #0d0c0b;
	--surface-suite: var(--suite-600);
	--surface-suite-deep: var(--suite-1000);
	--surface-overlay: rgba(5, 4, 3, .78);
	--surface-scrim: linear-gradient(to top, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .65) 45%, rgba(0, 0, 0, 0) 100%);

	/* Semantic text */
	--text-primary: var(--silver-100);
	--text-body: #c9c6c1;
	--text-muted: var(--silver-400);
	--text-faint: var(--silver-600);
	--text-accent: var(--gold-500);
	--text-accent-bright: var(--gold-300);
	--text-on-gold: var(--ink-950);
	--text-on-suite: var(--suite-100);
	--text-link: var(--gold-400);
	--text-link-hover: var(--gold-200);

	/* Lines */
	--border-hairline: rgba(214, 214, 214, .14);
	--border-strong: rgba(214, 214, 214, .28);
	--border-gold: rgba(203, 164, 58, .45);
	--border-gold-strong: var(--gold-600);
	--border-suite: rgba(143, 208, 224, .22);

	/* Gradients */
	--gradient-gold: linear-gradient(157deg, #fbe9b6 0%, #e5c777 18%, #cba43a 46%, #8a6b22 72%, #e5c777 100%);
	--gradient-suite-glow: radial-gradient(120% 100% at 50% 0%, rgba(79, 168, 199, .22) 0%, rgba(5, 11, 23, 0) 70%);
	--gradient-lamp: radial-gradient(60% 80% at 12% 100%, rgba(203, 164, 58, .20) 0%, rgba(10, 10, 10, 0) 65%);

	/* Focus */
	--focus-ring: 0 0 0 2px var(--ink-950), 0 0 0 4px var(--gold-500);

	/* Elevation */
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, .6);
	--shadow-sm: 0 2px 6px rgba(0, 0, 0, .55);
	--shadow-md: 0 8px 20px -6px rgba(0, 0, 0, .7);
	--shadow-lg: 0 20px 48px -14px rgba(0, 0, 0, .8);
	--shadow-xl: 0 36px 90px -24px rgba(0, 0, 0, .85);
	--glow-gold: 0 0 0 1px rgba(203, 164, 58, .35), 0 6px 26px -6px rgba(203, 164, 58, .28);
	--glow-gold-strong: 0 0 0 1px rgba(229, 199, 119, .6), 0 10px 40px -8px rgba(203, 164, 58, .45);
	--glow-suite: 0 0 0 1px rgba(79, 168, 199, .35), 0 8px 30px -8px rgba(79, 168, 199, .3);
	--inset-well: inset 0 1px 3px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .35);

	/* Radius */
	--radius-xs: 2px; --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --radius-pill: 999px;

	/* Typography */
	--font-display: "Playfair Display", 'Times New Roman', serif;
	--font-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
	--font-sans: "Montserrat", "Helvetica Neue", Helvetica, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

	--text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px;
	--text-lg: 20px; --text-xl: 25px; --text-2xl: 31px; --text-3xl: 39px; --text-4xl: 49px;
	--text-5xl: 61px; --text-6xl: 76px;

	--leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.45; --leading-relaxed: 1.65;

	--track-wide: 0.06em; --track-wider: 0.14em; --track-widest: 0.26em; --track-lockup: 0.42em;

	/* Spacing */
	--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
	--space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px;
	--space-11: 80px; --space-12: 96px; --space-13: 128px;

	--gutter-inline-lg: 64px;
	--container-max: 1240px;

	/* Motion */
	--ease-standard: cubic-bezier(.22, .61, .36, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--dur-fast: 140ms; --dur-normal: 220ms; --dur-dissolve: 700ms; --dur-fade-up: 1200ms;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms; --dur-normal: 0ms; --dur-dissolve: 0ms; --dur-fade-up: 0ms;
	}
}