/**
 * Design tokens — single source of truth for color, type, spacing, radius,
 * shadow, z-index, transition, and breakpoint values. Every other CSS
 * module consumes these custom properties; none of them hardcode a raw
 * value that belongs here. See docs/UI_GUIDELINES.md for the full
 * design-system reference, including WCAG contrast ratios for every
 * text/background color pairing below.
 *
 * Breakpoint values are also declared as custom properties for reference,
 * but CSS custom properties cannot be read inside @media conditions —
 * every @media rule in this theme uses the literal rem value directly.
 * Keep the two in sync by hand if a breakpoint ever changes.
 */

:root {
	/* ---------- Color: primary (teal) ---------- */
	--color-primary-50: #eaf4f2;
	--color-primary-100: #d2e7e3;
	--color-primary-300: #6fafa3;
	--color-primary-500: #1f6f63;
	--color-primary-600: #1a5f54;
	--color-primary-700: #164f46;
	--color-primary-900: #0d2f2a;

	/* ---------- Color: accent (amber) ---------- */
	--color-accent-100: #fbead2;
	--color-accent-400: #e8a33d;
	--color-accent-600: #9a5b12;
	--color-accent-700: #7a480e;

	/* ---------- Color: neutrals ---------- */
	--color-gray-50: #f9fafb;
	--color-gray-100: #f3f4f6;
	--color-gray-200: #e5e7eb;
	--color-gray-300: #d1d5db;
	--color-gray-400: #9ca3af;
	--color-gray-500: #6b7280;
	--color-gray-600: #4b5563;
	--color-gray-700: #374151;
	--color-gray-800: #1f2937;
	--color-gray-900: #111827;
	--color-white: #ffffff;

	/* ---------- Color: semantic (verified white-text-safe, see UI_GUIDELINES.md) ---------- */
	--color-success-100: #dcfce7;
	--color-success-500: #166534;
	--color-warning-100: #fef3c7;
	--color-warning-500: #92400e;
	--color-danger-100: #fee2e2;
	--color-danger-500: #b91c1c;
	--color-info-100: #dbeafe;
	--color-info-500: #1d4ed8;

	/* ---------- Color: brand-recognition (external services, not part of the design system's own palette) ---------- */
	--color-whatsapp: #25d366;
	--color-whatsapp-dark: #1da851;

	/* ---------- Color: semantic aliases (what components consume) ---------- */
	--color-text: var(--color-gray-800);
	--color-text-muted: var(--color-gray-600);
	--color-text-inverse: var(--color-white);
	--color-heading: var(--color-gray-900);
	--color-background: var(--color-white);
	--color-background-alt: var(--color-gray-50);
	--color-border: var(--color-gray-200);
	--color-border-strong: var(--color-gray-300);
	--color-link: var(--color-primary-500);
	--color-link-hover: var(--color-primary-700);
	--color-focus-ring: var(--color-primary-500);

	--color-brand-primary: var(--color-primary-500);
	--color-brand-primary-hover: var(--color-primary-700);
	--color-brand-secondary: var(--color-accent-600);
	--color-brand-secondary-hover: var(--color-accent-700);

	--color-success: var(--color-success-500);
	--color-warning: var(--color-warning-500);
	--color-danger: var(--color-danger-500);
	--color-info: var(--color-info-500);

	/* ---------- Typography ---------- */
	--font-family-heading: Georgia, 'Iowan Old Style', 'Apple Garamond', Baskerville, 'Times New Roman', 'Droid Serif', Times, serif;
	--font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
	--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-md: 1.125rem;
	--font-size-lg: 1.25rem;
	--font-size-xl: 1.5rem;
	--font-size-2xl: 1.875rem;
	--font-size-3xl: 2.25rem;
	--font-size-4xl: 3rem;
	--font-size-5xl: 3.75rem;

	--line-height-tight: 1.2;
	--line-height-snug: 1.35;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.65;

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* ---------- Spacing (4px base unit) ---------- */
	--space-0: 0;
	--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-none: 0;
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;
	--radius-full: 9999px;

	/* ---------- Shadows ---------- */
	--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--shadow-md: 0 4px 8px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.06);
	--shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
	--shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.16), 0 8px 16px rgba(15, 23, 42, 0.08);
	--shadow-focus: 0 0 0 3px rgba(31, 111, 99, 0.35);

	/* ---------- Z-index scale ---------- */
	--z-base: 0;
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-fixed: 300;
	--z-modal-backdrop: 400;
	--z-modal: 500;
	--z-popover: 600;
	--z-tooltip: 700;
	--z-toast: 800;
	--z-skip-link: 100000;

	/* ---------- Transitions ---------- */
	--transition-fast: 150ms;
	--transition-base: 250ms;
	--transition-slow: 400ms;
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-in: cubic-bezier(0.4, 0, 1, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);

	/* ---------- Breakpoints (reference only — see comment above) ---------- */
	--breakpoint-sm: 30rem;
	--breakpoint-md: 48rem;
	--breakpoint-lg: 64rem;
	--breakpoint-xl: 80rem;
	--breakpoint-2xl: 96rem;

	/* ---------- Layout containers (kept in sync with theme.json layout settings) ---------- */
	--container-content: 45rem;
	--container-wide: 75rem;

	/* ---------- Premium Experience Layer (Phase 2.14, docs/DECISIONS.md
	   ADR-034) — additive only, nothing above this point is renamed or
	   removed. New tokens for gradients, glassmorphism, elevated shadows,
	   and animation timing, consumed by assets/css/animations.css and the
	   section-specific premium enhancements. ---------- */

	/* Gradients */
	--gradient-primary: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
	--gradient-hero: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-primary-100) 45%, var(--color-accent-100) 100%);
	--gradient-mesh: radial-gradient(at 20% 20%, rgba(31, 111, 99, 0.18) 0px, transparent 50%),
		radial-gradient(at 80% 0%, rgba(232, 163, 61, 0.14) 0px, transparent 50%),
		radial-gradient(at 90% 80%, rgba(31, 111, 99, 0.12) 0px, transparent 50%);
	--gradient-cta-shape-1: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 70%);
	--gradient-cta-shape-2: radial-gradient(circle, rgba(232, 163, 61, 0.25), transparent 70%);

	/* Glassmorphism (header, floating cards) */
	--glass-bg: rgba(255, 255, 255, 0.72);
	--glass-border: rgba(255, 255, 255, 0.45);
	--blur-sm: 8px;
	--blur-md: 16px;
	--blur-lg: 24px;

	/* Elevated shadows (premium cards/hero), distinct from the Phase 2 scale above */
	--shadow-2xl: 0 32px 64px rgba(15, 23, 42, 0.18), 0 12px 24px rgba(15, 23, 42, 0.1);
	--shadow-glow-primary: 0 0 0 1px rgba(31, 111, 99, 0.12), 0 16px 40px rgba(31, 111, 99, 0.2);
	--shadow-card-hover: 0 20px 40px rgba(15, 23, 42, 0.14), 0 6px 12px rgba(15, 23, 42, 0.08);

	/* Animation timing */
	--duration-fade: 600ms;
	--duration-float: 6s;
	--duration-shimmer: 2.4s;
	--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}