/**
 * Design Tokens - CSS Custom Properties
 * "Celestial Almanac" palette — free-psychic.com (site 60)
 * Warm parchment page, deep-indigo ink, copper + sage accents.
 * Light-background, ink-on-paper — deliberately unlike the network's
 * dark / jewel-toned siblings.
 *
 * @package Free_Psychic_Circle
 */

:root {
	/* Colors - Ink (primary / headings / dark surfaces) */
	--color-ink: #16233F;
	--color-ink-soft: rgba(22, 35, 63, 0.08);

	/* Colors - Copper (accent / CTA) */
	--color-copper: #C06B3E;
	--color-copper-hover: #A65A31;
	--color-copper-light: rgba(192, 107, 62, 0.12);

	/* Colors - Sage (secondary accent) */
	--color-sage: #7C9885;
	--color-sage-hover: #6C8574;
	--color-sage-light: rgba(124, 152, 133, 0.14);

	/* Colors - Parchment (backgrounds) */
	--color-parchment: #FAF6EF;
	--color-parchment-deep: #F0E9DA;
	--color-ivory: #FFFFFF;

	/* Colors - Text */
	--color-charcoal: #2B2A26;
	--color-text-muted: #6B6459;
	--color-text-light: #8B8375;

	/* Colors - Structure */
	--color-hairline: #D9CFB8;

	/* Colors - Semantic */
	--color-error: #B4483A;
	--color-success: #5C7A5F;
	--color-warning: #C06B3E;

	/* Legacy aliases kept for readability in component CSS */
	--color-primary: var(--color-ink);
	--color-secondary: var(--color-parchment);
	--color-accent: var(--color-copper);
	--color-accent-hover: var(--color-copper-hover);
	--color-text-primary: var(--color-charcoal);
	--color-text-secondary: var(--color-text-muted);
	--color-border: var(--color-hairline);
	--color-white: var(--color-ivory);

	/* 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.25rem;
	--text-h2: 2.25rem;
	--text-h3: 1.625rem;
	--text-h4: 1.3rem;
	--text-h5: 1.1rem;
	--text-body-lg: 1.125rem;
	--text-body: 1rem;
	--text-body-sm: 0.875rem;
	--text-caption: 0.75rem;
	--text-eyebrow: 0.8125rem;

	/* Typography - Line Heights */
	--leading-h1: 1.12;
	--leading-h2: 1.2;
	--leading-h3: 1.3;
	--leading-h4: 1.4;
	--leading-body: 1.65;
	--leading-body-lg: 1.7;

	/* Typography - Letter Spacing */
	--tracking-heading: -0.01em;
	--tracking-eyebrow: 0.12em;
	--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 — modest, "printed card" feel, never glossy-SaaS */
	--radius-sm: 3px;
	--radius-md: 6px;
	--radius-lg: 10px;
	--radius-xl: 14px;
	--radius-full: 9999px;

	/* Shadows — used sparingly; hairlines carry most of the structure */
	--shadow-xs: 0 1px 2px rgba(22, 35, 63, 0.05);
	--shadow-sm: 0 2px 6px rgba(22, 35, 63, 0.06);
	--shadow-md: 0 6px 16px rgba(22, 35, 63, 0.08);
	--shadow-lg: 0 12px 28px rgba(22, 35, 63, 0.10);
	--shadow-focus: 0 0 0 3px rgba(192, 107, 62, 0.35);

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

	/* Layout */
	--container-max: 1200px;
	--container-narrow: 680px;
	--container-medium: 900px;
	--header-height: 76px;

	/* Section Padding */
	--section-padding: var(--space-24);
}

/* Mobile scale adjustments */
@media (max-width: 767px) {
	:root {
		--text-h1: 2.15rem;
		--text-h2: 1.65rem;
		--text-h3: 1.35rem;
		--text-h4: 1.125rem;
		--text-h5: 1rem;
		--section-padding: var(--space-12);
	}
}

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