/* ==========================================================================
   Craft Elya — design tokens (single source of truth)
   Brand values from CLAUDE.md. Hex values are mirrored in
   inc/ce-flatsome-settings.php — change both together.
   ========================================================================== */

@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/fraunces-var-latin.woff2") format("woff2-variations"),
		url("../fonts/fraunces-var-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-var-latin.woff2") format("woff2-variations"),
		url("../fonts/manrope-var-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Colour — brand (CLAUDE.md) */
	--ce-ivory: #F8F4EC;
	--ce-paper: #FFFDF9;
	--ce-forest: #29483B;
	--ce-forest-dark: #1D352B;
	--ce-terracotta: #B77A48;      /* decorative / large text only (3.25:1 on ivory) */
	--ce-brass: #C5A36A;           /* decorative only; text only on forest-dark (5.5:1) */
	--ce-charcoal: #292722;
	--ce-muted: #68645C;
	--ce-border: #E6DED1;          /* dividers only (1.3:1) */
	--ce-error: #A3332C;
	--ce-success: #23684A;

	/* Colour — accessibility additions */
	--ce-terracotta-ink: #8E5A31;  /* 5.2:1 on ivory — terracotta for text, sale price */
	--ce-border-strong: #8C8577;   /* 3.6:1 on paper — form control outlines */
	--ce-on-dark: #F8F4EC;         /* text on forest / forest-dark */

	/* Radius, shadow, layout */
	--ce-radius-sm: 8px;
	--ce-radius-md: 14px;
	--ce-radius-lg: 24px;
	--ce-shadow: 0 12px 36px rgba(41, 39, 34, .08);
	--ce-container: 1280px;
	--ce-gutter: clamp(16px, 4vw, 32px);

	/* Spacing */
	--ce-space-1: 4px;
	--ce-space-2: 8px;
	--ce-space-3: 12px;
	--ce-space-4: 16px;
	--ce-space-6: 24px;
	--ce-space-8: 32px;
	--ce-space-12: 48px;
	--ce-space-16: 64px;
	--ce-space-20: 80px;

	/* Typography */
	--ce-font-serif: "Fraunces", Georgia, "Times New Roman", serif;
	--ce-font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Devanagari", "Helvetica Neue", Arial, sans-serif;
	--ce-fs-h1: clamp(2.25rem, 1.2rem + 4.2vw, 4.75rem);
	--ce-fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
	--ce-fs-h3: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
	--ce-fs-h4: 1.25rem;
	--ce-fs-body: clamp(1rem, .95rem + .25vw, 1.0625rem);
	--ce-fs-small: .875rem;
	--ce-fs-eyebrow: .8125rem;
	--ce-lh-body: 1.6;
	--ce-lh-heading: 1.12;

	/* Interaction */
	--ce-ease: cubic-bezier(.22, 1, .36, 1);
	--ce-dur-fast: 160ms;
	--ce-dur-menu: 220ms;
	--ce-control-height: 48px;
	--ce-focus-ring: 0 0 0 2px var(--ce-paper), 0 0 0 4px var(--ce-forest);

	/* Flatsome bridge — Flatsome components read these */
	--fs-color-primary: var(--ce-forest);
	--fs-color-secondary: var(--ce-terracotta-ink);
	--fs-color-success: var(--ce-success);
	--fs-color-alert: var(--ce-error);
	--fs-color-base: var(--ce-charcoal);
	--fs-experimental-link-color: var(--ce-forest);
	--fs-experimental-link-color-hover: var(--ce-forest-dark);
	--primary-color: var(--ce-forest);
}