/**
 * Design Tokens — CSS Custom Properties
 * Palette: Deep Pine Teal + Warm Parchment + Burnt Copper + Candlelight Amber
 * "Written-correspondence / lantern-light" — Quiet Oracle
 *
 * @package Quiet_Oracle
 */

:root {
	/* Colors — Primary (Deep Pine Teal) */
	--color-primary: #103C3A;
	--color-primary-hover: #0A2A28;
	--color-primary-light: rgba(16, 60, 58, 0.08);
	--color-primary-dark: #0A2624;

	/* Colors — Secondary (Warm Parchment bg) */
	--color-secondary: #F4EFE3;
	--color-secondary-dark: #E7DAC0;

	/* Colors — Accent (Burnt Copper) */
	--color-accent: #C6743A;
	--color-accent-hover: #A85F2D;
	--color-accent-light: rgba(198, 116, 58, 0.12);

	/* Colors — Highlight (Candlelight Amber) */
	--color-highlight: #E3B23C;
	--color-highlight-hover: #C89525;
	--color-highlight-light: rgba(227, 178, 60, 0.16);

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

	/* Colors — Neutral text/border scale (warm, ink-on-paper) */
	--color-text-primary: #23201B;
	--color-text-secondary: #514B41;
	--color-text-light: #8A8177;
	--color-border: #E3DAC9;
	--color-white: #FFFFFF;

	/* Colors — Semantic */
	--color-success: #4C8B5D;
	--color-error: #B34B3C;
	--color-warning: #E3B23C;
	--color-info: #3E7C82;

	/* Gradients */
	--gradient-hero: linear-gradient(135deg, #F4EFE3 0%, #EFE7D6 45%, #E7DAC0 100%);
	--gradient-section: linear-gradient(180deg, #FFFFFF 0%, #F4EFE3 100%);
	--gradient-card-hover: linear-gradient(180deg, #FFFFFF 0%, #F4EFE3 100%);
	--gradient-lantern: radial-gradient(circle at 50% 0%, rgba(227, 178, 60, 0.18) 0%, transparent 60%);
	--gradient-ink: linear-gradient(135deg, var(--color-primary) 0%, #1A5652 100%);

	/* Typography — Families */
	--font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
	--font-body: 'Karla', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-accent: 'Fraunces', Georgia, serif;

	/* Typography — Scale */
	--text-h1: 3.5rem;
	--text-h2: 2.5rem;
	--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: 1.15;
	--leading-h2: 1.2;
	--leading-h3: 1.3;
	--leading-h4: 1.4;
	--leading-body: 1.7;
	--leading-body-lg: 1.8;

	/* Typography — Letter Spacing */
	--tracking-heading: 0.005em;
	--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: 20px;
	--radius-2xl: 32px;
	--radius-full: 9999px;

	/* Shadows — soft, warm, ink-toned */
	--shadow-xs: 0 1px 3px rgba(35, 32, 27, 0.06);
	--shadow-sm: 0 2px 8px rgba(35, 32, 27, 0.08), 0 1px 3px rgba(35, 32, 27, 0.05);
	--shadow-md: 0 4px 16px rgba(35, 32, 27, 0.12), 0 2px 6px rgba(35, 32, 27, 0.06);
	--shadow-lg: 0 8px 32px rgba(35, 32, 27, 0.16), 0 4px 12px rgba(35, 32, 27, 0.08);
	--shadow-xl: 0 16px 56px rgba(35, 32, 27, 0.18), 0 8px 24px rgba(35, 32, 27, 0.10);
	--shadow-inner: inset 0 2px 6px rgba(35, 32, 27, 0.08);
	--shadow-focus: 0 0 0 3px rgba(198, 116, 58, 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 */
	--section-padding: var(--space-24);
}

/* Mobile scale adjustments */
@media (max-width: 767px) {
	:root {
		--text-h1: 2.25rem;
		--text-h2: 1.75rem;
		--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: 2.75rem;
		--text-h2: 2rem;
		--text-h3: 1.5rem;
		--section-padding: var(--space-16);
	}
}