/**
 * Design tokens — the single source of truth for all design constants.
 *
 * Lifted 1:1 from the design mockups (design/*.html :root + used values).
 * No component may hardcode a color/spacing/radius/shadow/font — reference these only.
 *
 * Policy:
 *  - Colors            → semantic aliases over a named palette.
 *  - Spacing / radius  → value-named tokens (e.g. --space-14 = 14px) to stay pixel-exact
 *                        with a hand-crafted design (no rounding = no visual drift).
 *  - Type scale        → value-named (--text-13 = 13px), same reason.
 *  - Structural sizes  → declared as component-scoped vars in each component's CSS,
 *                        not here (they are structural, not thematic).
 *
 * @package Bozpo_Custom
 */

:root {
	/* ---- Palette (light) ---- */
	--c-brand: #e8491d;
	--c-brand-dark: #c93c14;
	--c-accent: #f47c20;
	--c-ink: #1a1a1a;
	--c-ink-soft: #3a3f47;
	--c-ink-lead: #3f444c;
	--c-ink-body: #374151;
	--c-muted: #6b7280;
	--c-line: #e7e7e9;
	--c-bg: #ffffff;
	--c-soft: #f6f6f7;
	--c-soft2: #f0f0f2;
	--c-ok: #1f9d57;
	--c-ok-bright: #4ade80;
	--c-mega-arrow: #c7a08c;
	--c-white: #ffffff;
	--c-black: #000000;

	/* ---- Palette (dark / footer) ---- */
	--c-dark: #222226;
	--c-dark2: #2c2c31;
	--c-dark-border: #3a3a40;
	--c-footer-text: #c9c9cf;
	--c-footer-link: #b6b6bd;
	--c-footer-muted: #7c7c84;
	--c-footer-muted2: #8a8a91;
	--c-chip-ink: #222222;

	/* ---- Semantic aliases (prefer these in components) ---- */
	--color-primary: var(--c-brand);
	--color-primary-strong: var(--c-brand-dark);
	--color-text: var(--c-ink);
	--color-muted: var(--c-muted);
	--color-border: var(--c-line);
	--surface: var(--c-bg);
	--surface-soft: var(--c-soft);
	--surface-soft2: var(--c-soft2);
	--on-primary: var(--c-white);
	/* Add-to-cart colour (company blue) — used only by the add-to-cart buttons so
	   they stand apart from the orange brand CTA used elsewhere. */
	--color-addtocart: #00a0e3;
	--color-addtocart-strong: #0086c2;

	/* ---- Alpha overlays / glass ---- */
	--c-dot-idle: rgba(0, 0, 0, .22);
	--c-on-gradient: rgba(255, 255, 255, .92);
	--surface-glass: rgba(255, 255, 255, .88);
	--surface-glass-soft: rgba(255, 255, 255, .2);
	--surface-glass-strong: rgba(255, 255, 255, .92);

	/* ---- Feedback / status ---- */
	--c-stock-ink: #92400e;
	--c-stock-bg: #fff7ed;
	--c-stock-border: #fde4cd;
	--c-dpd-ink: #7a1010;
	--c-border-hover: #cfcfd3;
	--c-success-bg: #e9f7ef;
	--c-success-border: #b6e4c8;
	--c-success-ink: #1b7a43;
	--c-danger-bg: #fdf3f3;
	--c-danger-border: #f3c9c9;
	--c-danger-ink: #b42318;

	/* ---- Radius (value-named, exact) ---- */
	--radius-2: 2px;
	--radius-4: 4px;
	--radius-5: 5px;
	--radius-6: 6px;
	--radius-7: 7px;
	--radius-8: 8px;
	--radius-9: 9px;
	--radius-10: 10px;
	--radius-12: 12px;
	--radius-14: 14px;
	--radius-16: 16px;
	--radius-18: 18px;
	--radius-20: 20px;
	--radius-pill: 999px;
	--radius-circle: 50%;
	--radius: var(--radius-10); /* design default */

	/* ---- Shadow ---- */
	--shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05);
	--shadow-panel: 0 24px 48px rgba(0, 0, 0, .14);
	--shadow-drawer: 0 0 40px rgba(0, 0, 0, .2);
	--shadow-toast: 0 10px 30px rgba(0, 0, 0, .25);
	--shadow-brand: 0 8px 18px rgba(232, 73, 29, .26);
	--shadow-hover: 0 14px 30px rgba(0, 0, 0, .18);
	--shadow-add: 0 8px 20px rgba(232, 73, 29, .28);
	--shadow-add-hover: 0 10px 26px rgba(232, 73, 29, .34);
	/* Blue glow for the add-to-cart button (matches --color-addtocart). */
	--shadow-addcart: 0 8px 20px rgba(0, 160, 227, .28);
	--shadow-addcart-hover: 0 10px 26px rgba(0, 160, 227, .34);
	--shadow-ptabs: 0 6px 14px rgba(0, 0, 0, .04);
	--shadow-thumb: 0 1px 4px rgba(0, 0, 0, .2);
	--overlay: rgba(20, 20, 25, .32);
	/* Left-anchored dark scrim for white text over promo banner images. */
	--scrim-banner: linear-gradient( 90deg, rgba(20, 20, 25, .82) 0%, rgba(20, 20, 25, .5) 48%, rgba(20, 20, 25, .12) 100% );

	/* ---- Filters ---- */
	--filter-hero-visual: drop-shadow(0 16px 24px rgba(0, 0, 0, .16));
	--filter-tile-icon: drop-shadow(0 6px 12px rgba(0, 0, 0, .18));

	/* ---- Gradients (decorative, 1:1 from design) ---- */
	--gradient-hero-1: linear-gradient(125deg, #fff6f1 0%, #ffe4d3 100%);
	--gradient-hero-2: linear-gradient(125deg, #f1f6ff 0%, #dbeaff 100%);
	--gradient-hero-3: linear-gradient(125deg, #f2faf4 0%, #daf0e0 100%);
	--gradient-promo-1: linear-gradient(130deg, #1e63c4, #2f7fd6);
	--gradient-promo-2: linear-gradient(130deg, #ef7d1a, #f4974a);
	--gradient-cat-1: linear-gradient(135deg, #1e63c4, #2f7fd6);
	--gradient-cat-2: linear-gradient(135deg, #ef7d1a, #f4974a);
	--gradient-cat-3: linear-gradient(135deg, #d8241f, #e8491d);
	--gradient-cat-4: linear-gradient(135deg, #1f9d57, #34b86c);
	--gradient-cat-5: linear-gradient(135deg, #6b46c1, #8a63d2);
	--gradient-cat-6: linear-gradient(135deg, #0f766e, #14a89a);

	/* ---- Typography ---- */
	--font-display: "Barlow Semi Condensed", system-ui, sans-serif;
	--font-body: "Inter", system-ui, sans-serif;

	--text-8-5: 8.5px;
	--text-10: 10px;
	--text-11: 11px;
	--text-11-5: 11.5px;
	--text-12: 12px;
	--text-12-5: 12.5px;
	--text-13: 13px;
	--text-13-5: 13.5px;
	--text-14: 14px;
	--text-14-5: 14.5px;
	--text-15: 15px;
	--text-15-5: 15.5px;
	--text-16: 16px;
	--text-16-5: 16.5px;
	--text-17: 17px;
	--text-18: 18px;
	--text-18-5: 18.5px;
	--text-19: 19px;
	--text-21: 21px;
	--text-22: 22px;
	--text-24: 24px;
	--text-25: 25px;
	--text-26: 26px;
	--text-28: 28px;
	--text-30: 30px;
	--text-32: 32px;
	--text-34: 34px;
	--text-38: 38px;
	--text-42: 42px;

	--leading-tight: 1.25;
	--leading-snug: 1.4;
	--leading-relaxed: 1.45;
	--leading-normal: 1.5;
	--leading-104: 1.04;
	--leading-105: 1.05;
	--leading-112: 1.12;
	--leading-116: 1.16;
	--leading-130: 1.3;
	--leading-155: 1.55;
	--leading-165: 1.65;
	--leading-170: 1.7;

	/* ---- Spacing (value-named, exact) ---- */
	--space-1: 1px;
	--space-2: 2px;
	--space-3: 3px;
	--space-4: 4px;
	--space-5: 5px;
	--space-6: 6px;
	--space-7: 7px;
	--space-8: 8px;
	--space-9: 9px;
	--space-10: 10px;
	--space-11: 11px;
	--space-12: 12px;
	--space-13: 13px;
	--space-14: 14px;
	--space-15: 15px;
	--space-16: 16px;
	--space-18: 18px;
	--space-19: 19px;
	--space-20: 20px;
	--space-22: 22px;
	--space-24: 24px;
	--space-26: 26px;
	--space-28: 28px;
	--space-30: 30px;
	--space-32: 32px;
	--space-34: 34px;
	--space-40: 40px;
	--space-44: 44px;
	--space-46: 46px;
	--space-48: 48px;
	--space-50: 50px;

	/* ---- Layout ---- */
	--container: 1300px;
	/* Uniform section side padding: 10px on mobile, 22px from tablet up. */
	--wrap-pad: var(--space-10);
}

@media (min-width: 561px) {
	:root {
		--wrap-pad: var(--space-22);
	}
}