/* ============================================================
   Freaura — Design Tokens
   Single source of truth. Copied verbatim from design-tokens.md
   / freaura-spa.html :root. Do NOT re-derive values elsewhere —
   reference these custom properties in every template & override.
   ============================================================ */

:root {
	/* Colors */
	--cream: #f4ede0;        /* primary background */
	--cream-deep: #ebe0cb;   /* secondary background / image placeholder bg */
	--ivory: #fbf8f1;        /* lightest text on dark backgrounds */
	--emerald: #1f3a32;      /* primary brand accent, italic text highlights */
	--emerald-deep: #0f2620; /* darker emerald variant */
	--midnight: #0a0908;     /* near-black, primary buttons, curtain bg */
	--ink: #1a1815;          /* primary body text */
	--ink-soft: #4a443c;     /* secondary/muted text */
	--brass: #b08d50;        /* gold accent — eyebrows, hover states, dividers */
	--brass-pale: #d4b785;   /* lighter gold — dark-bg accents */
	--burgundy: #5a2a2a;     /* rare accent color */
	--rose-dust: #c89890;    /* rare accent color */
	--line: rgba(26, 24, 21, 0.12);       /* borders on light bg */
	--line-light: rgba(26, 24, 21, 0.06); /* subtle dividers */

	/* Typography
	   NOTE: named --font-* (not --display/--serif/--sans) because Elementor
	   uses a layout variable literally named --display (= flex) on its
	   containers, which collided with a font token of the same name and
	   broke heading fonts. --font-display etc. avoid that collision. */
	--font-display: 'Playfair Display', serif;   /* H1, product names, headlines */
	--font-serif: 'Cormorant Garamond', serif;   /* italic taglines, subheads */
	--font-sans: 'Inter', sans-serif;            /* body, nav, buttons, labels */

	/* Back-compat aliases (some rules may still reference the old names).
	   These are safe on :root; Elementor only overrides --display locally. */
	--serif: 'Cormorant Garamond', serif;
	--sans: 'Inter', sans-serif;
}