/**
 * ORA design tokens — single source for theme CSS.
 * Brand rules: docs/BRANDING-GUIDELINES.md · Live: https://ora-us.com/
 */
:root {
	/* Brand */
	--ora-magenta: #c91078;
	--ora-magenta-dark: #a00d60;
	--ora-accent: #c91078;
	--ora-black: #222222;
	--ora-dark: #32373c;
	--ora-topbar: #32373c;
	--ora-text: #222222;
	--ora-muted: #858585;
	--ora-border: #e8e8e8;
	--ora-wash: #faf8f6;
	--ora-cream: #fff8f1;
	--ora-soft: #f3ebe3;
	--ora-white: #ffffff;
	--ora-hero-blob: #f0ebe6;
	--ora-hero-ring: #e0d8d0;

	/* Product family accents (optional) */
	--ora-eucalyptus: #2f6b4f;
	--ora-turmeric: #e8a317;
	--ora-coffee: #6b4a2b;
	--ora-lemon: #d4c43a;
	--ora-charcoal: #2a2a2a;

	/* Semantic aliases (shop / cart imports) */
	--ora-brand: var(--ora-magenta);
	--ora-brand-dark: var(--ora-magenta-dark);
	--ora-navy: var(--ora-black);
	--ora-navy-deep: #111111;
	--ora-navy-mid: #32373c;
	--ora-surface: var(--ora-white);
	--ora-surface-muted: var(--ora-wash);
	--ora-surface-cream: var(--ora-cream);
	--ora-surface-soft: var(--ora-soft);

	/* Type — Public Sans matches live ora-us.com */
	--ora-font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ora-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--ora-fs-body: 1rem;
	--ora-fs-lead: 1.0625rem;
	--ora-fs-h1: clamp(2.25rem, 4.5vw, 3.25rem);
	--ora-fs-h2: clamp(1.75rem, 3vw, 2.25rem);
	--ora-lh-tight: 1.1;
	--ora-lh-body: 1.6;

	/* Spacing scale */
	--ora-space-1: 0.25rem;
	--ora-space-2: 0.5rem;
	--ora-space-3: 0.75rem;
	--ora-space-4: 1rem;
	--ora-space-5: 1.25rem;
	--ora-space-6: 1.5rem;
	--ora-space-7: 2rem;
	--ora-space-8: 2.5rem;

	/* Layout — canvas widths (industry: ~1280–1440px content, fluid gutters) */
	--ora-container: 1320px;
	--ora-container-wide: 1440px;
	--ora-gutter: clamp(1rem, 2.5vw, 2rem);
	--ora-section-pad-y: clamp(2rem, 3.5vw, 3rem);
	--ora-header-offset: 0px;
	--ora-card-pad: var(--ora-space-6);
	--ora-card-pad-sm: var(--ora-space-5);

	/* Radius / elevation */
	--ora-radius: 6px;
	--ora-radius-sm: 8px;
	--ora-radius-md: 12px;
	--ora-radius-lg: 22px;
	--ora-radius-xl: 28px;
	--ora-radius-pill: 999px;
	--ora-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
	--ora-shadow-lg: 0 14px 42px rgba(0, 0, 0, 0.1);
	--ora-shadow-brand: 0 4px 14px rgba(201, 16, 120, 0.28);

	/* Buttons — use these everywhere */
	--ora-btn-font: var(--ora-font);
	--ora-btn-weight: 700;
	--ora-btn-size: 0.875rem;
	--ora-btn-lh: 1;
	--ora-btn-height: 44px;
	--ora-btn-height-sm: 40px;
	--ora-btn-pad-x: 1.25rem;
	--ora-btn-pad-x-sm: 1rem;
	--ora-btn-radius: var(--ora-radius-pill);
	--ora-btn-gap: var(--ora-space-2);
	--ora-btn-bg: var(--ora-magenta);
	--ora-btn-bg-hover: var(--ora-magenta-dark);
	--ora-btn-fg: var(--ora-white);
	--ora-btn-soft-bg: var(--ora-soft);
	--ora-btn-soft-fg: var(--ora-black);
	--ora-btn-soft-border: transparent;
	--ora-btn-outline-border: var(--ora-border);
	--ora-btn-focus: var(--ora-magenta);
	--ora-btn-focus-offset: 2px;
	--ora-btn-shadow: var(--ora-shadow-brand);

	/* Motion */
	--ora-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ora-duration: 220ms;
}