/* =========================================================================
   Anchor v2 — Design Tokens
   STRICT brand palette only — exactly the 4 colors from the Elementor kit.
   No invented colors.
   ========================================================================= */

/* Mallians — self-hosted script accent. Used for cursive lines. */
@font-face {
	font-family: 'Mallians';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/Mallians.woff2') format('woff2'),
	     url('../fonts/Mallians.woff')  format('woff'),
	     url('../fonts/Mallians.ttf')   format('truetype');
}

:root {
	/* --- The ONLY brand colors --- */
	--brand-primary:   #523058;   /* Softened aubergine (lifted from #421B49 for less weight) */
	--brand-primary-deep: #421B49; /* Original deep aubergine, kept for accents */
	--brand-secondary: #C9561C;   /* Burnt rust */
	--brand-text:      #7A7A7A;   /* Medium gray (used for body) */
	--brand-accent:    #61CE70;   /* Fresh green */

	/* Tints derived from brand colors (transparency overlays only) */
	--brand-primary-05:  rgba(82, 48, 88, 0.05);
	--brand-primary-08:  rgba(82, 48, 88, 0.08);
	--brand-primary-15:  rgba(82, 48, 88, 0.15);
	--brand-primary-30:  rgba(82, 48, 88, 0.30);
	--brand-primary-60:  rgba(82, 48, 88, 0.60);
	--brand-primary-80:  rgba(82, 48, 88, 0.80);

	--brand-secondary-08: rgba(201, 86, 28, 0.08);
	--brand-secondary-15: rgba(201, 86, 28, 0.15);

	/* --- Neutrals --- */
	--ink: #1a1a1a;
	--ink-soft: #333;
	--muted: var(--brand-text);
	--line: rgba(0, 0, 0, 0.10);
	--line-soft: rgba(0, 0, 0, 0.06);
	--surface: #ffffff;
	--surface-soft: #fafaf8;
	--surface-cream: #f5f1ec;

	/* --- Type --- */
	/* Live Anchor site uses Jost site-wide */
	--font-display: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--font-script: 'Mallians', 'Pinyon Script', 'Caveat', cursive;

	/* Match the live site's exact heading + body sizes */
	--fs-heading: 40px;       /* section headings */
	--fs-hero: 50px;          /* hero slide titles (matches live) */
	--fs-body: 23px;          /* body text (matches live) */
	--fs-button: 17px;        /* button text (matches live) */
	--fs-meta: 14px;
	--fs-eyebrow: 12px;

	--lh-tight: 1.25;
	--lh-snug: 1.4;
	--lh-normal: 1.6;
	--lh-body: 35px;

	/* --- Layout --- */
	--container: 1200px;
	--container-narrow: 880px;
	--gutter: clamp(16px, 4vw, 30px);
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-full: 999px;

	/* --- Shadow & motion --- */
	--shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 10px 24px rgba(0, 0, 0, 0.10);
	--shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.14);

	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	--dur-fast: 160ms;
	--dur-base: 240ms;
	--dur-slow: 400ms;

	--z-base: 1;
	--z-content: 10;
	--z-overlay: 20;
	--z-header: 50;
	--z-modal: 80;
	--z-toast: 90;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms;
		--dur-base: 0ms;
		--dur-slow: 0ms;
	}
}