/**
 * BANZASHOP Design System — Tokens
 * ----------------------------------------------------------------
 * Single source of truth for colour, type, spacing and motion.
 * Every other file in /assets/css consumes these custom properties —
 * change the brand here and it cascades through the whole store.
 *
 * Palette: premium luxury system — gold (#D4AF37) as the primary
 * accent, black (#000000) as the secondary/dark UI colour, white
 * background, a soft neutral grey for section fills, and a warm dark
 * grey (#222222) for body copy. Clean, bright, high-contrast — closer
 * to Douglas/Chanel-style luxury retail than a dark, moody theme.
 */

:root {
	/* ---- Colour: neutrals ---- */
	--bz-ink:            #000000;   /* headings, dark UI, footer */
	--bz-ink-soft:       #222222;   /* body copy */
	--bz-paper:          #ffffff;   /* page background */
	--bz-surface:        #ffffff;   /* card / panel background */
	--bz-surface-alt:    #f8f8f8;   /* neutral section fill */
	--bz-border:         #e5e5e5;
	--bz-border-strong:  #d6d6d6;
	--bz-muted:          #6e6e6e;

	/* ---- Colour: brand ---- */
	--bz-accent:         #d4af37;   /* gold — primary CTA, links, price */
	--bz-accent-dark:    #b8952e;   /* gold, hover/active state */
	--bz-accent-light:   #faf3e1;   /* pale gold tint, badges/backgrounds */
	--bz-gold:           #d4af37;
	--bz-gold-light:     #faf3e1;
	--bz-on-accent:      #000000;   /* text colour placed on top of gold */

	/* ---- Colour: semantic ---- */
	--bz-success:        #1f6f43;
	--bz-error:          #b3261e;
	--bz-error-light:    #fbeceb;
	--bz-sale:           #b3261e;

	/* ---- Typography ---- */
	--bz-font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--bz-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Type scale — mapped to the BANZASHOP UI-role spec:
	   xs = Small text (14), sm = Buttons/nav (16), base = Body (17),
	   md = Card titles (21), lg = Product titles (24),
	   xl = Price (29), 2xl = Section titles (37),
	   3xl = large section/stat display (48), 4xl = Hero title (48-60, clamp) */
	--bz-fs-xs:   0.875rem;   /* 14px - small text */
	--bz-fs-sm:   1rem;       /* 16px - buttons, nav, meta */
	--bz-fs-base: 1.0625rem;  /* 17px - body text */
	--bz-fs-md:   1.3125rem;  /* 21px - card titles */
	--bz-fs-lg:   1.5rem;     /* 24px - product titles */
	--bz-fs-xl:   1.8125rem;  /* 29px - price */
	--bz-fs-2xl:  2.3125rem;  /* 37px - section titles */
	--bz-fs-3xl:  3rem;       /* 48px */
	--bz-fs-4xl:  3.75rem;    /* 60px - hero title (clamped) */

	--bz-lh-tight: 1.15;
	--bz-lh-normal: 1.55;
	--bz-lh-relaxed: 1.75;

	/* ---- Spacing scale (4px base) ---- */
	--bz-space-1: 0.25rem;
	--bz-space-2: 0.5rem;
	--bz-space-3: 0.75rem;
	--bz-space-4: 1rem;
	--bz-space-5: 1.5rem;
	--bz-space-6: 2rem;
	--bz-space-7: 3rem;
	--bz-space-8: 4rem;
	--bz-space-9: 6rem;
	--bz-space-10: 8rem;

	/* ---- Layout ---- */
	--bz-container: 1320px;
	--bz-container-narrow: 780px;
	--bz-radius-sm: 4px;
	--bz-radius-md: 8px;
	--bz-radius-lg: 16px;
	--bz-radius-pill: 999px;

	/* ---- Elevation ---- */
	--bz-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--bz-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
	--bz-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.14);

	/* ---- Motion ---- */
	--bz-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--bz-duration-fast: 150ms;
	--bz-duration-base: 250ms;
	--bz-duration-slow: 450ms;

	/* ---- Z-index scale ---- */
	--bz-z-header: 100;
	--bz-z-overlay: 200;
	--bz-z-modal: 300;
	--bz-z-toast: 400;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--bz-duration-fast: 0ms;
		--bz-duration-base: 0ms;
		--bz-duration-slow: 0ms;
	}
}