/*
 * 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: FAITHFUL to the existing 9Yaards Shopify store (Lirea theme).
 * Values are taken from the live site's own CSS, not reinterpreted:
 *   primary #c04814 · text #0b0b0b · white ground · Lato 14px body · Poppins 500
 *   headings · 11px nav/buttons · 1300px page width · overlay #0b0b0b @ 0.3.
 * Do NOT enlarge type or warm the ground into cream — the live site is compact
 * and white-based.
 */

:root {
	/* ---- Colour (from live site) ---- */
	--c-ink:        #0b0b0b; /* primary text — near-black (live --bs-body-color) */
	--c-ink-soft:   #4a4a4a; /* secondary text */
	--c-muted:      #767676; /* captions, meta */
	--c-line:       #ebebeb; /* hairline borders (live --bs-border-color) */
	--c-bg:         #ffffff; /* page ground — white */
	--c-surface:    #f8f7f4; /* very light neutral card ground (live --bs-color-border-card) */
	--c-surface-2:  #f1efea; /* deeper neutral surface */
	--c-primary:    #c04814; /* terracotta — live --color-foreground 192,72,20 */
	--c-primary-ink:#ffffff; /* text on primary */
	--c-primary-dk: #a23a10; /* hover */

	/* Section grounds (from live per-section --color-background) */
	--c-navy:       #122f4f; /* 18,47,79 — "Our Collection" / "Dusk to Night" panels */
	--c-maroon:     #5c2724; /* newsletter band (textured maroon on live) */
	--c-footer:     #131313; /* 19,19,19 — footer */
	--c-gold:       #e2982f; /* warm gold — section headings on dark grounds */
	--c-sale:       #c04814; /* sale price */
	--c-focus:      #0b0b0b; /* focus ring */
	--c-primary-soft:#f7ece6; /* terracotta tint — hover grounds, badges */
	--c-overlay:    rgba(11,11,11,0.30); /* image overlays (live --color-overlay 11,11,11 @ 0.3) */
	--c-overlay-dk: rgba(11,11,11,0.55);

	/* ---- Typography (compact, matching live) ---- */
	--font-head: "Poppins", ui-sans-serif, system-ui, sans-serif;
	--font-body: "Lato", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--fw-head: 500;      /* live --bs-font-heading-weight */

	--fs-100: 0.6875rem; /* 11 — nav / buttons (live 11px) */
	--fs-200: 0.75rem;   /* 12 */
	--fs-300: 0.875rem;  /* 14 — base body (live --font-size-base 14px) */
	--fs-400: 1rem;      /* 16 */
	--fs-500: 1.25rem;   /* 20 */
	--fs-600: 1.5rem;    /* 24 */
	--fs-700: 1.875rem;  /* 30 */
	--fs-800: clamp(1.875rem, 3vw, 2.75rem); /* display — restrained, not oversized */

	--lh-tight: 1.2;
	--lh-snug:  1.35;
	--lh-body:  1.6;

	--tracking-caps: 0.08em; /* letter-spacing for eyebrow/nav 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:      1300px; /* carried from the existing store */
	--container-wide: 1600px;
	--container-text: 720px;  /* editorial reading measure */
	--gutter:         clamp(1rem, 4vw, 2.5rem);

	/* ---- Radius / borders / shadow (restrained) ---- */
	--radius-sm: 2px;
	--radius:    4px;
	--radius-lg: 8px;
	--shadow:    0 1px 2px rgba(28,25,23,0.04), 0 8px 24px rgba(28,25,23,0.06);

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

	/* ---- Layout constants ---- */
	--header-h: 66px;
	--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 1300px
   Mobile-first: base styles target small screens; min-width queries scale up. */