/*
 * 9Yaards Design Tokens
 * The single source of truth for colour, type, spacing, radius, containers and
 * breakpoints. Every other stylesheet consumes these variables — never hard-code
 * a colour or size elsewhere.
 *
 * Direction: EDITORIAL LUXURY (redesign). A warm cream ground, a high-contrast
 * display serif (Cormorant Garamond) for headings, a quiet geometric sans (Jost)
 * for nav/labels/body, terracotta as the single accent, taupe grounds for feature
 * bands. Evolved from the compact live store toward a modern luxury feel.
 */

:root {
	/* ---- Colour ---- */
	--c-ink:        #211d18; /* primary text — warm near-black */
	--c-ink-soft:   #5f564a; /* secondary text */
	--c-muted:      #938876; /* captions, meta, eyebrows */
	--c-line:       #e5ddce; /* warm hairline borders */
	--c-bg:         #f6f1e9; /* page ground — warm cream */
	--c-surface:    #efe7db; /* card / image ground (slightly deeper cream) */
	--c-surface-2:  #e7ddce; /* deeper neutral surface */
	--c-taupe:      #d8cbb6; /* feature bands — split banner + newsletter */
	--c-taupe-dk:   #cbbca3; /* taupe hover / deeper */
	--c-primary:    #bd4f1e; /* terracotta — brand accent */
	--c-primary-ink:#ffffff; /* text on primary */
	--c-primary-dk: #9d3f16; /* hover */
	--c-primary-soft:#f2e4d8; /* terracotta tint — hover grounds, badges */

	/* Legacy section grounds — kept defined so non-home templates that still
	   reference them don't break. The redesigned homepage no longer uses them. */
	--c-navy:       #122f4f;
	--c-maroon:     #5c2724;
	--c-footer:     #efe7d9; /* footer ground — light cream (redesign) */
	--c-gold:       #e2982f;
	--c-sale:       #bd4f1e;
	--c-focus:      #211d18;
	--c-overlay:    rgba(24,17,10,0.32); /* image overlays */
	--c-overlay-dk: rgba(24,17,10,0.55);
	--c-hero-scrim: linear-gradient(90deg, rgba(28,20,12,0.62) 0%, rgba(28,20,12,0.34) 38%, rgba(28,20,12,0.05) 66%, rgba(28,20,12,0) 100%);

	/* ---- Typography ---- */
	--font-display: "Cormorant Garamond", "Georgia", "Times New Roman", serif; /* headings */
	--font-head:    "Jost", ui-sans-serif, system-ui, -apple-system, sans-serif; /* labels / nav / buttons */
	--font-body:    "Jost", ui-sans-serif, system-ui, -apple-system, sans-serif; /* body / product titles */
	--fw-head: 500;

	--fs-100: 0.6875rem; /* 11 — nav / buttons / eyebrows */
	--fs-200: 0.75rem;   /* 12 */
	--fs-300: 0.875rem;  /* 14 — base body */
	--fs-400: 1rem;      /* 16 — lede */
	--fs-500: 1.25rem;   /* 20 */
	--fs-600: 1.5rem;    /* 24 */
	--fs-700: 2rem;      /* 32 */
	--fs-800: clamp(2.1rem, 3.8vw, 3rem);   /* section display serif */
	--fs-900: clamp(2.6rem, 5.2vw, 4.25rem); /* hero display serif */

	--lh-tight: 1.1;
	--lh-snug:  1.3;
	--lh-body:  1.65;

	--tracking-caps: 0.14em; /* eyebrow / nav / button labels */
	--tracking-wide: 0.22em; /* extra-wide eyebrow labels */

	/* ---- Spacing scale (8pt-ish, generous) ---- */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;
	--sp-10: 8rem;

	/* ---- Containers ---- */
	--container:      1340px;
	--container-wide: 1600px;
	--container-text: 720px;
	--gutter:         clamp(1.1rem, 4vw, 3rem);

	/* ---- Radius / borders / shadow (restrained) ---- */
	--radius-sm: 2px;
	--radius:    3px;
	--radius-lg: 6px;
	--shadow:    0 1px 2px rgba(33,29,24,0.04), 0 14px 40px rgba(33,29,24,0.08);

	/* ---- Motion ---- */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--dur:  260ms;

	/* ---- Layout constants ---- */
	--announce-h: 38px;
	--header-h: 74px;
	--z-header: 100;
	--z-drawer: 200;
}

/* Breakpoints are documented here for reference (used as @media literals in CSS):
   sm 480px · md 768px · lg 1024px · xl 1340px
   Mobile-first: base styles target small screens; min-width queries scale up. */