/**
 * Design tokens — single source of truth for color, type, spacing, radius,
 * shadow, layout, motion. Light theme only (warm-ivory / near-black monochrome
 * with an antique-brass accent, coordinated to the black serif logo).
 * Ported from the storefront's tokens.css.
 */

:root {
	/* ---- Brand neutrals (warm monochrome) ---- */
	--color-ink: #14110d;
	--color-ink-soft: #2a2620;
	--color-body: #34302a;
	--color-muted: #6f685e;
	--color-faint: #736e63;
	--color-line: #e7e1d7;
	--color-line-strong: #d8cfc1;
	--color-paper: #faf7f2;
	--color-surface: #ffffff;
	--color-surface-alt: #f2ede4;
	--color-surface-2: #f6f2eb;
	--color-ink-invert: #f7f2ea;

	/* ---- Accent: restrained antique brass ---- */
	--color-accent: #9c7c4a;
	--color-accent-strong: #856637;
	--color-accent-soft: #efe6d5;
	--color-on-accent: #ffffff;

	/* ---- Dark sections ---- */
	--color-dark: #17130e;
	--color-dark-surface: #221d16;

	/* ---- Status ---- */
	--color-success: #3f6b4e;
	--color-sale: #9a3b2c;

	/* ---- Focus ---- */
	--focus-ring: 0 0 0 3px var(--color-accent-soft), 0 0 0 4px var(--color-accent-strong);

	/* ---- Typography families (self-hosted @font-face in base.css) ---- */
	--font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* ---- Type scale (~1.25 modular) ---- */
	--text-xs: 0.75rem;
	--text-sm: 0.8125rem;
	--text-base: 0.9375rem;
	--text-md: 1rem;
	--text-lg: 1.1875rem;
	--text-xl: 1.5rem;
	--text-2xl: 1.9375rem;
	--text-3xl: clamp(2rem, 1.4rem + 3vw, 2.5rem);
	--text-4xl: clamp(2.25rem, 1.5rem + 3.75vw, 3.25rem);
	--text-5xl: clamp(2.5rem, 1.35rem + 5.75vw, 4rem);

	--leading-tight: 1.12;
	--leading-snug: 1.3;
	--leading-normal: 1.62;
	--tracking-caps: 0.14em;
	--tracking-wide: 0.02em;

	/* ---- Spacing (4px base) ---- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;
	--space-32: 8rem;

	/* ---- Radius ---- */
	--radius-sm: 2px;
	--radius: 4px;
	--radius-lg: 8px;
	--radius-pill: 999px;

	/* ---- Shadows ---- */
	--shadow-sm: 0 1px 2px rgba(20, 17, 13, 0.06);
	--shadow-md: 0 8px 28px rgba(20, 17, 13, 0.1);
	--shadow-lg: 0 20px 50px rgba(20, 17, 13, 0.14);

	/* ---- Layout ---- */
	--container: 1200px;
	--container-narrow: 780px;
	--gutter: clamp(1rem, 4vw, 2.5rem);
	--header-h: 76px;

	/* ---- Motion ---- */
	--motion-fast: 150ms;
	--transition: 150ms ease;
	--transition-slow: 300ms ease;
}