/**
 * RJ4 Medspa — Design Tokens
 *
 * Single source of truth in code for docs/10-design-system.md (updated for
 * the 2026-07-14 experiential redesign — see docs/10 §1 revision notes).
 * Never redefine these values inline in a template (CLAUDE.md §4).
 */

:root {
	/* ---- 1. Color (docs/10 §1) ---- */

	/* Primary */
	--color-sage-green: #7F8D6A;
	--color-deep-olive: #4A533D;
	--color-ivory: #F8F7F2;
	--color-white: #FFFFFF;

	/* Canvas: warm porcelain replaces pure white as the page ground (redesign) */
	--color-porcelain: #FBFAF7;

	/* Neutrals */
	--color-heading: #2F342B;
	--color-body: #5E6558;
	/* Muted darkened from brand-guide #8B9185 for WCAG AA (docs/12 §5):
	   5.1:1 on white, 4.7:1 on ivory. Recorded in docs/10 §1. */
	--color-muted: #6A715F;
	--color-border: #E6E5DE;
	--color-hairline: #E3E1D8; /* menu rules, footer rules (redesign) */
	--color-card-bg: #FFFFFF;
	--color-section-alt-bg: #F8F7F2;
	--color-hover-bg: #6D7A5D;

	/* Footer flipped light per redesign footer concept (was #31372C dark) */
	--color-footer-bg: #F4F2EC;
	--color-footer-text: #2F342B;

	/* Topbar / dark surfaces */
	--color-ink: #23261F;
	/* Photo glaze for image-backed bands — keeps white text ≥ AA over imagery */
	--glaze: linear-gradient(180deg, rgba(35, 38, 31, 0.45) 0%, rgba(35, 38, 31, 0.72) 100%);
	--glaze-flat: rgba(35, 38, 31, 0.55);

	/* Buttons */
	--color-btn-primary-bg: #4A533D;
	--color-btn-primary-text: #FFFFFF;
	--color-btn-primary-hover: #5C684B;
	--color-btn-secondary-border: #4A533D;
	--color-btn-secondary-text: #4A533D;
	--color-btn-secondary-hover-bg: #4A533D;
	--color-btn-secondary-hover-text: #FFFFFF;

	/* On-dark hover tint (docs/10 §1 accessibility note) */
	--color-sage-tint: #A9B797;

	/* Accents */
	--color-success: #6E8B55;
	--color-warning: #B68B3A;
	--color-error: #A55A4A;

	/* Gradient (docs/01 §7) */
	--gradient-brand: linear-gradient(135deg, #7F8D6A 0%, #4A533D 100%);
	--gradient-overlay: linear-gradient(180deg, rgba(127, 141, 106, 0.85) 0%, rgba(74, 83, 61, 0.95) 100%);

	/* ---- 3. Typography (docs/10 §3, redesign) ---- */
	--font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Editorial display scale — hero and section titles carry the design */
	--text-display: clamp(2.75rem, 1.8rem + 4.2vw, 5rem);      /* hero */
	--text-h2: clamp(2.125rem, 1.55rem + 2.2vw, 3.25rem);      /* section titles */
	--text-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);            /* sub / menu items */
	--text-h4: 1.375rem;
	--text-body-lg: 1.0625rem;                                 /* 17px */
	--text-body: 1rem;
	--text-caption: 0.875rem;
	--text-label: 0.6875rem;                                   /* 11px eyebrows/buttons */

	--leading-display: 1.08;
	--leading-h2: 1.15;
	--leading-h3: 1.25;
	--leading-h4: 1.35;
	--leading-body: 1.75;
	--leading-caption: 1.55;

	--tracking-label: 0.18em;  /* eyebrows, buttons, nav, prices */
	--tracking-btn: 0.16em;

	/* ---- 4. Spacing (docs/10 §4 — 8px base) ---- */
	--space-xs: 8px;
	--space-sm: 16px;
	--space-md: 24px;
	--space-lg: 40px;
	--space-xl: 64px;
	--space-2xl: 96px;
	--space-3xl: 128px;

	/* ---- 5. Radius (docs/10 §5) — squared corners per redesign ---- */
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 6px;
	--radius-btn: 0;
	--radius-full: 999px; /* retained for the WhatsApp float only */

	/* ---- 6. Shadows ---- */
	--shadow-card: 0 15px 40px rgba(0, 0, 0, 0.06);
	--shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.10);
	--shadow-header: 0 2px 12px rgba(0, 0, 0, 0.05);

	/* ---- 7. Grid ---- */
	--container-max: 1320px;
	--gutter: clamp(20px, 4vw, 40px);
	/* Wider inset for full-bleed chrome (topbar, header, footer) so content
	   reaches the viewport edges without touching them (redesign). */
	--gutter-wide: clamp(20px, 3vw, 72px);

	/* ---- 12. Motion ---- */
	--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-drift: cubic-bezier(0.22, 1, 0.36, 1);
	--duration-fast: 150ms;
	--duration-default: 300ms;
	--duration-slow: 700ms;
	--duration-drift: 7000ms; /* hero Ken Burns */
}