/**
 * Design Tokens - CSS Custom Properties
 * Palette: Night Ink + Moonstone + Deep Rose
 *
 * @package Quiet_Oracle
 */

:root {
	/* Colors - Primary */
	--color-primary: #202348;
	--color-primary-hover: #171933;
	--color-primary-light: rgba(32, 35, 72, 0.08);
	--color-primary-dark: #121421;

	/* Colors - Secondary */
	--color-secondary: #F4F6F2;
	--color-secondary-dark: #E2E7DC;

	/* Colors - Accent */
	--color-accent: #8F4F67;
	--color-accent-hover: #71384F;
	--color-accent-light: rgba(143, 79, 103, 0.12);

	/* Colors - Highlight */
	--color-highlight: #C7A566;
	--color-highlight-hover: #A88545;
	--color-highlight-light: rgba(199, 165, 102, 0.18);

	/* Colors - Backgrounds */
	--color-bg-soft: #F8F9F6;
	--color-bg-white: #FFFFFF;

	/* Colors - Neutral text/border scale */
	--color-text-primary: #171923;
	--color-text-secondary: #505463;
	--color-text-light: #7D8292;
	--color-border: #DDE2E5;
	--color-white: #FFFFFF;

	/* Colors - Semantic */
	--color-success: #4C8B5D;
	--color-error: #B34B3C;
	--color-warning: #C7A566;
	--color-info: #496C88;

	/* Gradients */
	--gradient-hero: linear-gradient(135deg, #F8F9F6 0%, #EEF1F4 48%, #E7E2EA 100%);
	--gradient-section: linear-gradient(180deg, #FFFFFF 0%, #F8F9F6 100%);
	--gradient-card-hover: linear-gradient(180deg, #FFFFFF 0%, #F4F6F2 100%);
	--gradient-lantern: radial-gradient(circle at 72% 18%, rgba(143, 79, 103, 0.22) 0%, transparent 44%);
	--gradient-ink: linear-gradient(135deg, #202348 0%, #34385F 62%, #4B3855 100%);

	/* Typography - Families */
	--font-heading: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-body: 'Karla', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-accent: 'Outfit', system-ui, sans-serif;

	/* Typography - Scale */
	--text-h1: clamp(2.75rem, 6vw, 5.25rem);
	--text-h2: clamp(2rem, 4vw, 3.25rem);
	--text-h3: 1.75rem;
	--text-h4: 1.375rem;
	--text-h5: 1.125rem;
	--text-body-lg: 1.125rem;
	--text-body: 1rem;
	--text-body-sm: 0.875rem;
	--text-caption: 0.75rem;

	/* Typography - Line Heights */
	--leading-h1: 0.98;
	--leading-h2: 1.06;
	--leading-h3: 1.3;
	--leading-h4: 1.4;
	--leading-body: 1.7;
	--leading-body-lg: 1.8;

	/* Typography - Letter Spacing */
	--tracking-heading: 0;
	--tracking-body: 0;

	/* Spacing (4px base unit) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* Border Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-2xl: 24px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-xs: 0 1px 3px rgba(32, 35, 72, 0.06);
	--shadow-sm: 0 2px 8px rgba(32, 35, 72, 0.08), 0 1px 3px rgba(32, 35, 72, 0.05);
	--shadow-md: 0 8px 22px rgba(32, 35, 72, 0.11), 0 2px 6px rgba(32, 35, 72, 0.06);
	--shadow-lg: 0 18px 48px rgba(32, 35, 72, 0.16), 0 4px 12px rgba(32, 35, 72, 0.08);
	--shadow-xl: 0 28px 76px rgba(32, 35, 72, 0.20), 0 8px 24px rgba(32, 35, 72, 0.10);
	--shadow-inner: inset 0 2px 6px rgba(32, 35, 72, 0.08);
	--shadow-focus: 0 0 0 3px rgba(143, 79, 103, 0.35);

	/* Transitions */
	--transition-fast: 150ms ease-out;
	--transition-normal: 250ms ease-out;
	--transition-slow: 400ms ease-out;

	/* Layout */
	--container-max: 1200px;
	--container-narrow: 680px;
	--container-medium: 900px;
	--header-height: 72px;
	--section-padding: var(--space-20);
}

@media (max-width: 767px) {
	:root {
		--text-h1: 2.55rem;
		--text-h2: 2rem;
		--text-h3: 1.375rem;
		--text-h4: 1.125rem;
		--text-h5: 1rem;
		--section-padding: var(--space-12);
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	:root {
		--text-h1: 3.25rem;
		--text-h2: 2.35rem;
		--text-h3: 1.5rem;
		--section-padding: var(--space-16);
	}
}