/*
 * Aurelle — Design tokens
 * Every value here can be changed without touching component CSS.
 * Colours are also exposed to the WordPress Customizer (see inc/customizer.php).
 */

:root {
	/* ---------------------------------------------------------------
	 * Colour
	 * --------------------------------------------------------------- */
	--color-primary: #14201b;        /* ink — near-black with a green cast */
	--color-primary-hover: #000000;
	--color-secondary: #e9ebe4;      /* soft neutral, used for quiet surfaces */
	--color-accent: #1c5a4a;         /* gloss viridian */
	--color-accent-hover: #164538;
	--color-accent-soft: #e4ede9;

	--color-background: #f2f3f0;     /* pearl */
	--color-surface: #ffffff;
	--color-surface-alt: #eceeea;

	--color-text: #14201b;
	--color-muted-text: #5c6660;
	--color-inverse-text: #f6f7f4;

	--color-border: #dcded7;
	--color-border-strong: #b9bdb4;

	--color-sale: #a6412f;           /* price reductions, sale badge */
	--color-rating: #b4884a;         /* muted gold, stars only */
	--color-success: #1c5a4a;
	--color-error: #a6412f;
	--color-focus: #1c5a4a;

	/* Shorthand aliases kept for readability in components */
	--surface: var(--color-surface);
	--border: var(--color-border);

	/* ---------------------------------------------------------------
	 * Typography
	 * --------------------------------------------------------------- */
	--font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
	--font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-nav: var(--font-body);
	--font-product-title: var(--font-body);
	--font-price: var(--font-body);
	--font-button: var(--font-body);

	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-bold: 600;

	/* Fluid type scale — mobile first, grows with the viewport */
	--fs-display: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);
	--fs-h1: clamp(1.875rem, 1.35rem + 2.3vw, 3rem);
	--fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
	--fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
	--fs-h4: 1.125rem;
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-tiny: 0.75rem;
	--fs-nav: 0.9375rem;
	--fs-price: 1rem;
	--fs-button: 0.9375rem;

	--lh-tight: 1.1;
	--lh-heading: 1.2;
	--lh-body: 1.6;

	--ls-tight: -0.01em;
	--ls-nav: 0.02em;
	--ls-wide: 0.14em;

	--measure: 68ch;

	/* ---------------------------------------------------------------
	 * Space & layout
	 * --------------------------------------------------------------- */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2rem;
	--space-xl: 3rem;
	--space-2xl: 4rem;
	--space-3xl: 6rem;

	--gutter: 1rem;
	--container: 1600px;
	--container-narrow: 760px;

	--section-space: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);

	/* ---------------------------------------------------------------
	 * Shape, depth, motion
	 * --------------------------------------------------------------- */
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-pill: 999px;
	--border-hairline: 1px solid var(--color-border);

	--shadow-raised: 0 1px 2px rgba(20, 32, 27, 0.06);
	--shadow-overlay: 0 12px 40px rgba(20, 32, 27, 0.16);

	--tap-target: 44px;
	--duration: 180ms;
	--ease: cubic-bezier(0.32, 0.72, 0.3, 1);

	/* Layered UI */
	--z-header: 100;
	--z-drawer: 200;
	--z-overlay: 190;

	/* Header heights are also written by JS so sticky offsets stay honest */
	--header-height: 104px;
	--announcement-height: 36px;
}

@media (min-width: 768px) {
	:root {
		--gutter: 1.75rem;
	}
}

@media (min-width: 1024px) {
	:root {
		--gutter: 2rem;
		--fs-nav: 0.875rem;
	}
}