/*
 * brand-identity.css — Shop OV
 *
 * No DTCG export yet (2026-10-13): values are read from the Figma Style
 * Sheet frame (10:11) and the page frames, and hand-written in OVERRIDES as
 * the starter allows. When the designer's export arrives, convert it with
 * the parent's tools/tokens-to-css.py into GENERATED and delete the
 * duplicated lines below.
 *
 * Loads after the parent stylesheet and before css/site.css.
 */

/* ==== GENERATED, converter output replaces everything in this section ==== */

/* (empty until the DTCG export) */

/* ==== OVERRIDES, hand written, survives converter re-runs ==== */

:root {

	/* ---- Primitives: the Style Sheet's four rows, 100 lightest → 400 darkest */

	/* Mint → navy (brand) */
	--primary-100: #AFDAC7;
	--primary-200: #7CC2A3;
	--primary-300: #2A5B8E;
	--primary-400: #183451;

	/* Pinks */
	--secondary-100: #F9D2DA;
	--secondary-200: #F2A6B6;
	--secondary-300: #EC7992;
	--secondary-400: #E64D6F;

	/* Cream → orange (calls to action) */
	--accent-100: #FCF2E1;
	--accent-200: #F1D4B6;
	--accent-300: #E5AE77;
	--accent-400: #F58141;

	/* Neutrals */
	--neutral-100: #F1EEE9;
	--neutral-200: #B7B8B9;
	--neutral-300: #6D6E70;
	--neutral-400: #333234;

	/* ---- Semantics -------------------------------------------------- */

	--text-primary: var(--neutral-400);
	--text-secondary: var(--neutral-400);
	--text-accent: var(--secondary-400);
	--color-heading: var(--primary-400);
	--brand-default: var(--primary-400);
	--brand-strong: var(--primary-400);
	--border-brand: var(--primary-400);

	--cta-default: var(--accent-400);
	--cta-hover: var(--secondary-300);
	--cta-text: var(--white);
	--accent-link: var(--primary-300);
	--border-focus: var(--primary-300);

	/* ---- Type --------------------------------------------------------
	   Sofia Sans for headings, nav and buttons; Roboto for body; Style
	   Script for the accents ("golden"). Sizes are Figma's at 1440. */

	--font-family-heading: "Sofia Sans", "Helvetica", sans-serif;
	--font-family-body: "Roboto", "Helvetica", sans-serif;
	--font-family-button: "Sofia Sans", "Helvetica", sans-serif;
	--sov-font-script: "Style Script", cursive;

	--font-size-h1: clamp(30px, 2.78vw, 40px);
	--font-size-h2: clamp(25px, 2.08vw, 30px);
	--font-size-h3: clamp(20px, 1.53vw, 22px);
	--font-size-h4: 18px;
	--font-size-h5: 18px;
	--font-size-body: 16px;
	--font-size-small: 13px;

	--line-height-heading: 1.2;
	--line-height-body: 1.5625;

	/* ---- Buttons (Primary Light / Secondary / Primary Dark components) */

	--btn-radius: 10px;
	--btn-padding-y: 8px;
	--btn-padding-x: 20px;

	/* ---- Layout and rhythm ------------------------------------------
	   Content width 1200 (WebMO, 2026-10-14; the frames use 1152, x=144…1296
	   at 1440). Sections, band padding and intro → items are all 50 in the
	   frames. */

	--content-max-width: 1200px;
	--sov-space-section: 50px;
	--sov-space-stack: 50px;
	--sov-radius: 10px;
	--margin-vertical-normal: var(--sov-space-section);
	--margin-vertical-wide: var(--sov-space-section);
	--margin-vertical-wider: var(--sov-space-section);

	/* Photo bands: navy at 80% (Figma, flat; the parent's tint is a fade). */
	--tint-color: #183451;
	--tint-opacity: 0.8;
}