/**
 * 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 rationale: warm off-white + near-black ink (Apple-style
 * restraint) with a deep bottle-green / brushed-gold accent pairing,
 * evoking the premium-beauty register of Douglas and the editorial
 * confidence of About You, without any loud e-commerce primary blue.
 */

:root {
	/* ---- Colour: neutrals ---- */
	--bz-ink:            #14151a;
	--bz-ink-soft:       #34363f;
	--bz-paper:          #faf9f6;
	--bz-surface:        #ffffff;
	--bz-surface-alt:    #f2f0eb;
	--bz-border:         #e6e3db;
	--bz-border-strong:  #d3cfc4;
	--bz-muted:          #6f7079;

	/* ---- Colour: brand ---- */
	--bz-accent:         #1f3d34;   /* deep bottle green — primary CTA, links */
	--bz-accent-dark:    #142924;
	--bz-accent-light:   #e7efec;
	--bz-gold:           #ab8a53;   /* brushed gold — badges, prices, accents */
	--bz-gold-light:     #f3ece0;

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

	/* ---- Typography ---- */
	--bz-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--bz-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--bz-fs-xs:   0.8125rem;   /* 13px */
	--bz-fs-sm:   0.9375rem;   /* 15px */
	--bz-fs-base: 1rem;        /* 16px */
	--bz-fs-md:   1.125rem;    /* 18px */
	--bz-fs-lg:   1.375rem;    /* 22px */
	--bz-fs-xl:   1.75rem;     /* 28px */
	--bz-fs-2xl:  2.25rem;     /* 36px */
	--bz-fs-3xl:  3rem;        /* 48px */
	--bz-fs-4xl:  4rem;        /* 64px */

	--bz-lh-tight: 1.15;
	--bz-lh-normal: 1.5;
	--bz-lh-relaxed: 1.7;

	/* ---- 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(20, 21, 26, 0.06);
	--bz-shadow-md: 0 8px 24px rgba(20, 21, 26, 0.08);
	--bz-shadow-lg: 0 24px 48px rgba(20, 21, 26, 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;
}

/* Respect user motion preference across the whole store */
@media (prefers-reduced-motion: reduce) {
	:root {
		--bz-duration-fast: 0ms;
		--bz-duration-base: 0ms;
		--bz-duration-slow: 0ms;
	}
}