/* ==========================================================================
   Emily H&B — Design tokens
   --------------------------------------------------------------------------
   Single source of truth for colour, spacing, radius and type, transcribed
   from the Figma file "Emily H&B (AU) — UI Design":
     · Colour           — 17 variables
     · Spacing & Radius — 12 spacing steps, 4 radii
     · Text styles      — 19 styles (see typography.css)

   COLOUR SOURCING RULE
   Eleven of the seventeen Figma colours are seeded into the Kadence global
   palette (see inc/class-emily-hb-palette.php), so they are editable by staff
   in Appearance → Customize → Colors and are emitted by Kadence as
   --global-palette1..11. Those tokens ALIAS the Kadence variable rather than
   repeating the hex, so there is exactly one place to change a brand colour.

   Only the three colours that have no slot left in the Kadence palette are
   written as literal hex here. Do not hardcode any other hex in this theme.
   ========================================================================== */

:root {

	/* --- Colour · brand ------------------------------------------------- */

	--ehb-brand-magenta:      var(--global-palette1);   /* #b93c7b */
	--ehb-brand-orchid:       var(--global-palette2);   /* #7a4fa3 */
	--ehb-brand-rose-plum:    var(--global-palette10);  /* #944c72 */

	/* --- Colour · text --------------------------------------------------- */

	--ehb-text-ink:           var(--global-palette3);   /* #241320 */
	--ehb-text-body:          var(--global-palette4);   /* #3d2c36 */
	--ehb-text-muted:         var(--global-palette5);   /* #6b5a65 */
	--ehb-text-on-dark:       var(--global-palette9);   /* #ffffff — same value as surface/paper */
	--ehb-text-muted-on-dark: #b49fae;                  /* no palette slot — footer meta only */

	/* --- Colour · surface ------------------------------------------------ */

	--ehb-surface-paper:      var(--global-palette9);   /* #ffffff */
	--ehb-surface-raised:     var(--global-palette8);   /* #fbf7fa */
	--ehb-surface-blush:      var(--global-palette7);   /* #f7eaf1 */
	--ehb-surface-lilac:      #f0e8f6;                  /* no palette slot */
	--ehb-surface-ink:        var(--global-palette3);   /* #241320 — same value as text/ink */

	/* --- Colour · line --------------------------------------------------- */

	--ehb-line-subtle:        #e7dce5;                  /* no palette slot */
	--ehb-line-strong:        var(--global-palette6);   /* #d3c3cf */

	/* --- Colour · status ------------------------------------------------- */

	--ehb-status-sale:        var(--global-palette1);   /* #b93c7b — same value as brand/magenta */
	--ehb-status-in-stock:    var(--global-palette11);  /* #2f6b52 */

	/* --- Spacing ---------------------------------------------------------
	   Figma collection "Spacing & Radius". These are the ONLY permitted gap,
	   padding and margin values. Anything between two steps is a mistake in
	   the build, not a missing token.                                      */

	--ehb-space-2:   2px;
	--ehb-space-4:   4px;
	--ehb-space-8:   8px;
	--ehb-space-12:  12px;
	--ehb-space-16:  16px;
	--ehb-space-20:  20px;
	--ehb-space-24:  24px;
	--ehb-space-28:  28px;  /* cart-totals / order-summary / checkout-review card padding (Figma 197:228) */
	--ehb-space-32:  32px;
	--ehb-space-36:  36px;
	--ehb-space-40:  40px;
	--ehb-space-48:  48px;
	--ehb-space-56:  56px;
	--ehb-space-64:  64px;
	--ehb-space-72:  72px;
	--ehb-space-80:  80px;
	--ehb-space-96:  96px;

	/* --- Radius ----------------------------------------------------------- */

	--ehb-radius-sm:   4px;
	--ehb-radius-md:   8px;
	--ehb-radius-lg:   14px;
	--ehb-radius-pill: 999px;

	/* --- Layout -----------------------------------------------------------
	   Desktop frames are 1440 wide with a 120px gutter each side, so the
	   content column is 1200. Mobile frames are 390 with a 16px gutter.     */

	--ehb-content-width: 1200px;
	--ehb-wide-width:    1440px;
	--ehb-gutter:        var(--ehb-space-16); /* widened to 120px at >=1024px, below */

	/* --- Type · families --------------------------------------------------
	   Fallback metrics are chosen to limit layout shift while the webfont
	   loads; both stacks fall back to the platform grotesque.              */

	--ehb-font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--ehb-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	/* --- Type · weights --------------------------------------------------- */

	--ehb-weight-medium:     500;
	--ehb-weight-semibold:   600;
	--ehb-weight-bold:       700;
	--ehb-weight-extrabold:  800;
	--ehb-weight-black:      900;

	/* --- Type · fluid sizes -----------------------------------------------
	   Desktop values are the Figma text styles from page 01. Mobile values
	   were measured off the 390px frames on page "03 · Mobile — All screens"
	   (the mobile frames use ad-hoc overrides, not separate text styles), so
	   the display steps are interpolated between the two breakpoints rather
	   than stepped at a media query. Ramp: 390px → 1440px.

	   Sizes that are identical at both widths are plain px on purpose.      */

	--ehb-size-d1:   clamp(32px, calc(32px + 32 * (100vw - 390px) / 1050), 64px);
	--ehb-size-d2:   clamp(21px, calc(21px + 19 * (100vw - 390px) / 1050), 40px);
	--ehb-size-d3:   clamp(17px, calc(17px + 11 * (100vw - 390px) / 1050), 28px);

	--ehb-size-h1:   clamp(26px, calc(26px + 14 * (100vw - 390px) / 1050), 40px);
	--ehb-size-h2:   clamp(21px, calc(21px +  9 * (100vw - 390px) / 1050), 30px);
	--ehb-size-h3:   clamp(17px, calc(17px +  3 * (100vw - 390px) / 1050), 20px);
	--ehb-size-h4:   16px;

	--ehb-size-body-large:    clamp(16px, calc(16px + 2 * (100vw - 390px) / 1050), 18px);
	--ehb-size-body-base:     16px;
	--ehb-size-body-small:    14px;
	--ehb-size-body-caption:  12px;
	--ehb-size-price:         clamp(16px, calc(16px + 2 * (100vw - 390px) / 1050), 18px);
	--ehb-size-price-compact: 16px;

	--ehb-size-label-button:         13px;
	--ehb-size-label-button-compact: 12px;
	--ehb-size-label-eyebrow:        11px;
	--ehb-size-label-badge:          9px;
	--ehb-size-label-nav:            14px;

	/* --- Type · line heights ----------------------------------------------
	   Unitless so they survive the fluid sizes above. Derived from the
	   Figma pixel line-heights at the desktop size.                        */

	--ehb-lh-d1:  1;      /* 64 / 64  */
	--ehb-lh-d2:  1.1;    /* 44 / 40  */
	--ehb-lh-d3:  1.215;  /* 34 / 28  */
	--ehb-lh-h1:  1.2;    /* 48 / 40  */
	--ehb-lh-h2:  1.267;  /* 38 / 30  */
	--ehb-lh-h3:  1.35;   /* 27 / 20  */
	--ehb-lh-h4:  1.375;  /* 22 / 16  */

	--ehb-lh-body-large:    1.667; /* 30 / 18 */
	--ehb-lh-body-base:     1.625; /* 26 / 16 */
	--ehb-lh-body-small:    1.571; /* 22 / 14 */
	--ehb-lh-body-caption:  1.5;   /* 18 / 12 */
	--ehb-lh-price:         1.444; /* 26 / 18 */
	--ehb-lh-price-compact: 1.375; /* 22 / 16 */

	--ehb-lh-label-button:         1.231; /* 16 / 13 */
	--ehb-lh-label-button-compact: 1.25;  /* 15 / 12 */
	--ehb-lh-label-eyebrow:        1.273; /* 14 / 11 */
	--ehb-lh-label-badge:          1.222; /* 11 / 9  */
	--ehb-lh-label-nav:            1.429; /* 20 / 14 */

	/* --- Type · letter spacing --------------------------------------------
	   Figma stores tracking as a percentage of the font size, so these are
	   em, never px — a px value would break at the fluid sizes above.      */

	--ehb-ls-d1:  -0.02em;
	--ehb-ls-d2:  -0.015em;
	--ehb-ls-d3:  -0.01em;
	--ehb-ls-h1:  -0.015em;
	--ehb-ls-h2:  -0.01em;
	--ehb-ls-h3:  -0.005em;
	--ehb-ls-h4:  0;

	--ehb-ls-label-button:         0.08em;
	--ehb-ls-label-button-compact: 0.04em;
	--ehb-ls-label-eyebrow:        0.12em;
	--ehb-ls-label-badge:          0.06em;
	--ehb-ls-label-nav:            0.02em;
}

/* Tablet gutter (768px–1023px). */
@media (min-width: 768px) and (max-width: 1023px) {
	:root {
		--ehb-gutter: 24px;
	}
}

/* Desktop gutter (>=1024px). Kept as a separate block rather than CSS nesting so the
   file parses in every browser listed in Specification §16. */
@media (min-width: 1024px) {
	:root {
		--ehb-gutter: 120px;
	}
}

/* Honour the operating-system reduced-motion preference globally. Individual
   transitions are defined in motion.css (build step 7); this is the blanket
   guard required by the Figma "Motion & Interaction" spec. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}