/* ==========================================================================
   Kat Addams — Design Tokens
   Gritty, high-contrast romance-with-bite: black + gold + hot raspberry pink.
   ========================================================================== */

:root {
	/* Core palette */
	--color-ink: #0e0b0d;
	--color-ink-soft: #1c1519;
	--color-ink-elevated: #241a1f;
	--color-raspberry: #d31760;
	--color-raspberry-dark: #9e0f47;
	--color-raspberry-light: #ff5c94;
	--color-gold: #c9a24a;
	--color-gold-bright: #e8c876;
	--color-gold-deep: #8a6a1f;
	--color-blush: #f3ded6;
	--color-cream: #fbf3ec;
	--color-navy: #12172b;
	--color-white: #fffdfb;

	/* Semantic */
	--color-bg: var(--color-cream);
	--color-bg-dark: var(--color-ink);
	--color-surface: var(--color-white);
	--color-surface-dark: var(--color-ink-soft);
	--color-accent: var(--color-raspberry);
	--color-accent-hover: var(--color-raspberry-dark);
	--color-accent-2: var(--color-gold);
	--color-text: #1c1215;
	--color-text-muted: #6b5a61;
	--color-text-on-dark: #f6ece7;
	--color-text-muted-on-dark: #c2aeb3;
	--color-border: rgba(28, 18, 21, 0.12);
	--color-border-on-dark: rgba(246, 236, 231, 0.14);

	/* Typography */
	--font-display: "League Gothic", "Arial Narrow", sans-serif;
	--font-script: "Playlist Script", cursive;
	--font-body: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;

	--text-xs: 0.8rem;
	--text-sm: 0.925rem;
	--text-base: 1rem;
	--text-lg: 1.15rem;
	--text-xl: 1.4rem;
	--text-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	--text-3xl: clamp(2.3rem, 1.8rem + 2.6vw, 3.5rem);
	--text-hero: clamp(3.4rem, 2.2rem + 8vw, 8.5rem);
	--tracking-wide: 0.08em;
	--tracking-wider: 0.16em;

	/* Spacing (8px rhythm) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;
	--space-10: 8rem;

	/* Layout */
	--container-max: 1280px;
	--container-narrow: 760px;
	--radius-sm: 6px;
	--radius-md: 14px;
	--radius-lg: 28px;
	--radius-pill: 999px;

	/* Shadows */
	--shadow-sm: 0 2px 8px rgba(14, 11, 13, 0.08);
	--shadow-md: 0 12px 32px rgba(14, 11, 13, 0.14);
	--shadow-lg: 0 24px 64px rgba(14, 11, 13, 0.22);
	--shadow-gold-glow: 0 0 0 1px rgba(201, 162, 74, 0.4), 0 8px 24px rgba(201, 162, 74, 0.25);
	--shadow-pink-glow: 0 8px 28px rgba(211, 23, 96, 0.35);

	/* Motion */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--duration-fast: 150ms;
	--duration-base: 280ms;
	--duration-slow: 450ms;

	/* Z-index scale */
	--z-nav: 100;
	--z-overlay: 500;
	--z-modal: 1000;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0ms;
		--duration-base: 0ms;
		--duration-slow: 0ms;
	}
}