/* ═══════════════════════════════════════════
   DESIGN TOKENS — extracted from Figma
   ═══════════════════════════════════════════
   The @font-face rules are NOT here: they are printed in the document head by
   inc/enqueue.php so the font URLs resolve against the theme directory rather
   than the stylesheet, and so the bold face can be preloaded.
   ═══════════════════════════════════════════ */

:root {
	/* ── Colour ─────────────────────────────── */
	--se-black: #000000;
	--se-dark: #111111;
	--se-dark-card: #141414;
	--se-gold: #F6BF02;
	--se-yellow: #F6BF02;
	--se-pink: #FF04BC;
	--se-magenta: #FF04BC;
	--se-white: #FFFFFF;
	--se-off-white: #F5F5F0;
	--se-green: #1A3A2A;
	--se-green-dark: #0D1A0D;
	--se-gray: #B3B3B3;
	--se-light-gray: #CCCCCC;

	/* Text colours that carry AA contrast on their own ground.
	   --se-gray (#B3B3B3) is 1.9:1 on white and must never be body text
	   there; --se-muted-on-light is the safe substitute at 4.6:1. */
	--se-muted-on-light: #595959;
	--se-muted-on-dark: #B3B3B3;

	/* The brand pink is 3.5:1 on white — fine for a large heading or a filled
	   button's ground, never for a link in body copy. This is the same hue
	   darkened to 5.6:1 so text links on white can still read as pink. */
	--se-pink-on-light: #C4008F;
	--se-line-on-light: rgba(0, 0, 0, 0.14);
	--se-line-on-dark: rgba(255, 255, 255, 0.14);

	/* Focus ring — gold on dark, black on gold/white; both clear AA. */
	--se-focus: var(--se-gold);
	--se-focus-width: 2px;
	--se-focus-offset: 3px;

	/* ── Type ───────────────────────────────── */
	--font-display: 'Bebas Neue', 'Impact', sans-serif;
	--font-heading: 'Bebas Neue', 'Impact', sans-serif;
	--font-body: 'bebas-neue-pro', 'Bebas Neue', 'Helvetica Neue', Arial, sans-serif;

	/* Aliases used by the product-page rules extracted from the prototype. */
	--font-bebas: var(--font-heading);
	--font-bebas-pro: var(--font-body);
	--font-brutalist: 'Tel Aviv Brutalist', 'Bebas Neue', 'Impact', sans-serif;
	--font-telaviv: var(--font-brutalist);

	--font-campus: "campus-mn", sans-serif;
	--font-lasalle: "filmotype-lasalle", "Brush Script MT", cursive;
	--font-metalista: "metalista-web", "Brush Script MT", cursive;
	--font-nexa-rust: "nexa-rust-sans-black-2", 'Bebas Neue', 'Impact', sans-serif;

	/* Figma values (pt → rem at a 16px base). */
	--type-display-size: 2.75rem;   /* 44pt */
	--type-heading-size: 1.5rem;    /* 24pt */
	--type-body-size: 1.125rem;     /* 18pt */
	--type-line-height: 1;
	--type-letter-spacing: 0;
	--type-body-bold-lh: 2.125rem;

	/* Line height for running prose. The 100% leading above is a display
	   value; anything longer than a line needs room to breathe (WCAG 1.4.12). */
	--type-prose-lh: 1.6;

	/* ── Layout ─────────────────────────────── */
	--container-max: 1440px;
	--container-padding: 2rem;
	--header-height: 4.5rem;
	--admin-bar: var(--se-admin-bar, 0px);

	/* Fluid section padding: 20px at 320px → 80px at 1440px. */
	--gutter: clamp(1.25rem, 0.79rem + 2.32vw, 5rem);

	/* Carousel geometry — the card width is fixed by design. */
	--card-width: 358px;
	--card-gap: 36px;

	/* ── Spacing ────────────────────────────── */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--space-2xl: 6rem;
	--space-3xl: 8rem;

	/* ── Motion ─────────────────────────────── */
	--transition-fast: 150ms ease;
	--transition-base: 300ms ease;
	--transition-slow: 500ms ease;
	/* The card's add button. Decelerating, so it arrives softly rather than
	   snapping open; long enough to read as a reveal, short enough to keep up
	   with a pointer skimming across a carousel. */
	--card-add-ease: 420ms cubic-bezier(0.33, 1, 0.68, 1);

	/* ── Depth ──────────────────────────────── */
	--z-footer: 0;
	--z-content: 2;
	--z-header: 1000;
	--z-overlay: 2000;
	--z-modal: 3000;
}

@media (min-width: 48rem) {
	:root {
		--header-height: 5rem;
	}
}

/* A visitor who asked for less motion gets no transitions either — the two
   settings are the same request. Individual components must not re-enable
   them; if something needs to move, it has to opt in explicitly. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--transition-fast: 0ms;
		--transition-base: 0ms;
		--transition-slow: 0ms;
		--card-add-ease: 0ms;
	}
}