/*
 * Design tokens — the single source of styling truth.
 *
 * Every value is transcribed from handoff/DESIGN-SYSTEM.md. Nothing here is
 * invented, rounded or "improved". Templates and component CSS must reference
 * these variables; never hardcode a colour, size or radius downstream.
 *
 * Where the handoff records a range (H2 is "34-40px"), each value that actually
 * occurs in the design gets its own named token rather than a single average.
 */

:root {
	/* ---------------------------------------------------------------------
	 * Colour — brand core
	 * ------------------------------------------------------------------ */
	--al-ivory: #F8F5F0;          /* page background, every page */
	--al-cream: #FDFBF7;          /* cards, panels, alternating sections */
	--al-lavender: #B59CCF;       /* primary buttons, accents */
	--al-lavender-hover: #A188BE; /* hover of every primary button */
	--al-lavender-t1: #F1EBF6;    /* tinted section bands, info callouts */
	--al-lavender-t2: #EEE8F4;    /* experience cards, selected chips, step circles */
	--al-lavender-t3: #E3D9EE;    /* announcement bar */
	--al-selection: #E7DEF1;      /* ::selection */
	--al-on-primary: #FDFCFA;     /* text on a filled lavender button */

	/* Colour — text */
	--al-heading: #5C4E73;        /* serif headings, product names */
	--al-plum-deep: #6B5E80;      /* summary numbers, callout titles, top bar */
	--al-plum-light: #8E7BA8;     /* logo, prices, active nav, link hover */
	--al-eyebrow: #9B87B5;        /* uppercase eyebrows, footer column headings */
	--al-body: #4A4353;           /* default body colour */
	--al-body-mid: #6B6375;       /* paragraphs */
	--al-body-soft: #776F82;      /* card descriptions */
	--al-muted: #9A93A4;          /* captions, breadcrumbs, meta */
	--al-faint: #A79DB3;          /* logo tagline, placeholders */
	--al-print: #A39A88;          /* footer copyright row */

	/* Colour — support hues, fixed rotation in this order */
	--al-sand-bg: #F3EDE4;
	--al-sand-strong: #E7DCCB;
	--al-sand-strong-alt: #D9C7AF;
	--al-sand-text: #8A7455;

	--al-hue-lavender-bg: #EEE8F4;
	--al-hue-lavender-strong: #DCCEEB;
	--al-hue-lavender-text: #6B5E80;

	--al-rose-bg: #F4ECEC;
	--al-rose-strong: #E8D4D4;
	--al-rose-text: #96707A;

	--al-sage-bg: #EDF0EA;
	--al-sage-strong: #D3DECD;
	--al-sage-strong-alt: #B7C6B2;
	--al-sage-text: #6E7D64;

	/* Colour — feedback. The design defines no error or warning colour. */
	--al-success-bg: var(--al-sage-bg);
	--al-success-glyph: var(--al-sage-text);

	/* ---------------------------------------------------------------------
	 * Borders — ten distinct greys, each tied to one usage
	 * ------------------------------------------------------------------ */
	--al-border-nav: #ECE6DC;
	--al-border-section: #F0EAE1;    /* section rules, card borders */
	--al-border-spec: #EDE7DC;       /* spec-table rows */
	--al-border-control: #DED6C9;    /* inputs, chips, qty stepper */
	--al-border-field: #E3DCD0;      /* form inputs */
	--al-border-cart-pill: #D9CFE6;
	--al-border-secondary: #C5B8D6;  /* secondary button */
	--al-border-rule: #C9BBDA;       /* 40px rule under centred headings */
	--al-border-connector: #E3DACC;  /* how-it-works connector */
	--al-border-newsletter: #DCD4C9;

	/* ---------------------------------------------------------------------
	 * Gradients — hero overlays only
	 * ------------------------------------------------------------------ */
	--al-hero-overlay-home: linear-gradient(90deg, rgba(248, 245, 240, 0.94) 0%, rgba(248, 245, 240, 0.6) 36%, rgba(248, 245, 240, 0) 62%);
	--al-hero-overlay-category: linear-gradient(90deg, rgba(248, 245, 240, 0.94) 0%, rgba(248, 245, 240, 0.55) 40%, rgba(248, 245, 240, 0) 68%);

	/* ---------------------------------------------------------------------
	 * Typography
	 * ------------------------------------------------------------------ */
	/*
	 * Stacks are the design source's verbatim, including the bare generic
	 * fallbacks. A richer fallback list would render identically once the
	 * self-hosted faces load, but it reports as a permanent difference in the
	 * computed-style diff, and the source is the agreed truth. Both faces are
	 * self-hosted and preloaded, so the fallback is only ever seen mid-swap.
	 */
	--al-font-serif: 'Cormorant Garamond', serif;
	--al-font-sans: 'Montserrat', sans-serif;

	--al-weight-light: 300;
	--al-weight-regular: 400;
	--al-weight-medium: 500;
	--al-weight-semibold: 600;

	/* H1 — one token per page family, because the sizes are deliberate */
	--al-h1-home: 62px;
	--al-h1-category: 48px;
	--al-h1-personal: 52px;
	--al-h1-about: 54px;
	--al-h1-product: 44px;        /* also cart */
	--al-h1-line: 1.06;
	--al-h1-line-loose: 1.1;
	--al-h1-line-hero: 1.08;      /* the two category heroes only */

	--al-h2-xs: 30px;             /* "Pairs beautifully with", "More Creative Kits" */
	--al-h2-sm: 34px;
	--al-h2-md: 36px;             /* "Shop by Collection" */
	--al-h2-lg: 40px;
	--al-h2-line: 1.15;
	--al-h2-line-loose: 1.2;

	--al-h3-kit-card: 23px;

	--al-h3-sm: 21px;
	--al-h3-lg: 24px;

	--al-price-lg: 28px;
	--al-price-card-sm: 18px;
	--al-price-card-lg: 19px;

	--al-eyebrow-size: 11px;
	--al-eyebrow-tracking: 0.26em;
	--al-eyebrow-tracking-hero: 0.28em;  /* category heroes */
	--al-eyebrow-tracking-wide: 0.3em;
	--al-eyebrow-tracking-footer: 0.2em;

	/* The "Explore →" affordance on a kit card, and nothing else. */
	--al-link-inline-size: 11.5px;
	--al-link-inline-tracking: 0.08em;

	--al-nav-size: 13.5px;

	--al-body-size: 13px;
	--al-body-size-lg: 13.5px;
	--al-body-line: 1.8;
	--al-body-line-loose: 1.9;

	--al-card-desc-size: 12px;
	--al-card-desc-size-lg: 12.5px;
	--al-card-desc-line: 1.7;
	--al-card-desc-line-loose: 1.8;

	--al-button-size: 13px;
	--al-button-tracking: 0.05em;

	--al-caption-sm: 11px;
	--al-caption-lg: 12px;

	--al-logo-size: 27px;
	--al-logo-tracking: 0.02em;
	--al-logo-tagline-size: 10px;
	--al-logo-tagline-tracking: 0.12em;

	/* ---------------------------------------------------------------------
	 * Layout
	 * ------------------------------------------------------------------ */
	--al-max-width: 1240px;
	--al-max-width-checkout: 1180px;
	--al-max-width-narrow: 820px;
	--al-max-width-narrow-lg: 1100px;

	--al-page-padding: 56px;
	--al-hero-indent: 96px;

	--al-section-padding: 72px;
	--al-section-padding-lg: 96px;
	--al-footer-padding-top: 64px;
	--al-footer-padding-bottom: 40px;

	--al-grid-gap: 22px;              /* product grids */
	--al-grid-gap-strip: 18px;        /* photo strips */
	--al-grid-gap-strip-lg: 20px;
	--al-grid-gap-footer: 48px;

	/* The approved design is desktop-only; see handoff/RESPONSIVE.md. */
	--al-min-width: 1180px;

	/* ---------------------------------------------------------------------
	 * Radius
	 * ------------------------------------------------------------------ */
	--al-radius-pill: 999px;       /* buttons, chips, pills, search input */
	--al-radius-card: 16px;        /* product cards */
	--al-radius-card-lg: 18px;     /* experience/collection cards, hero images */
	--al-radius-feature: 20px;     /* large feature images */
	--al-radius-sm: 12px;          /* small gallery images, form inputs */
	--al-radius-sm-lg: 14px;
	--al-radius-callout: 14px;
	--al-radius-callout-lg: 16px;

	/* ---------------------------------------------------------------------
	 * Shadows — the design defines exactly three. Resting cards have none.
	 * ------------------------------------------------------------------ */
	--al-shadow-card-hover: 0 16px 36px rgba(92, 78, 115, 0.1);
	--al-shadow-feature-hover: 0 18px 40px rgba(92, 78, 115, 0.1);
	--al-shadow-form: 0 16px 40px rgba(92, 78, 115, 0.08);

	--al-lift-card: -5px;
	--al-lift-feature: -6px;

	/* ---------------------------------------------------------------------
	 * Motion — one easing, three durations, each tied to one role
	 * ------------------------------------------------------------------ */
	--al-transition: 0.35s ease;        /* colour: links, buttons */
	--al-transition-fast: 0.3s ease;    /* filter chips */
	--al-transition-lift: 0.4s ease;    /* card transform and shadow */

	/* "Added to cart ✓" reverts after this. Read by JS, not by CSS. */
	--al-added-revert: 1800ms;
}

/*
 * Kit card tint. The index is stored per product as `_al_hue_index` because
 * the design's sequence diverges from `hues[i % 4]` on six of the sixteen
 * cards; see the audit note in the implementation plan. Order is the fixed
 * DESIGN-SYSTEM.md rotation: sand, lavender, rose, sage.
 */
.al-hue-0 { --al-hue: var(--al-sand-bg); }
.al-hue-1 { --al-hue: var(--al-hue-lavender-bg); }
.al-hue-2 { --al-hue: var(--al-rose-bg); }
.al-hue-3 { --al-hue: var(--al-sage-bg); }