/* ==========================================================================
   Design tokens — measured from the source's app.css (347 KB), by frequency.
   The source is NOT token-driven (only swiper + review vars exist), so these
   are ours; the VALUES are the source's.
   ========================================================================== */

:root {
	/* --- ink / navy ------------------------------------------------------ */
	--wbs-ink:            #102a3a;   /* 94 uses — primary text + dark panels  */
	--wbs-ink-deep:       #142231;
	--wbs-ink-soft:       #24485a;

	/* --- blues ----------------------------------------------------------- */
	--wbs-blue:           #0f3d68;   /* 57 uses */
	--wbs-blue-deep:      #102f4f;
	--wbs-blue-review:    #225fa6;

	/* --- greens / teal ---------------------------------------------------- */
	--wbs-teal:           #498485;   /* 38 uses — primary action colour       */
	--wbs-teal-deep:      #2f7d7b;
	--wbs-cyan:           #1fb6d1;   /* swiper theme colour = accent          */

	/* --- warm accent ------------------------------------------------------ */
	--wbs-rust:           #a76535;   /* 25 uses — badges, highlights          */

	/* --- surfaces --------------------------------------------------------- */
	--wbs-cream:          #fffdf7;   /* page ground — warm, not white         */
	--wbs-cream-alt:      #fffdf8;
	--wbs-paper:          #f3f5f2;
	--wbs-white:          #ffffff;
	--wbs-mist:           #e4efed;
	--wbs-sage:           #d8ded8;
	--wbs-sage-cool:      #d6dfde;

	/* --- text ------------------------------------------------------------- */
	--wbs-muted:          #60706d;
	--wbs-muted-cool:     #687781;
	--wbs-muted-warm:     #5c6168;

	/* --- lines ------------------------------------------------------------ */
	--wbs-line:           #dce4ed;
	--wbs-line-soft:      #e5e5e5;

	/* --- review component (the source DOES define these) ------------------ */
	--review-ink:         #172334;
	--review-blue:        #225fa6;
	--review-line:        #dce4ed;
	--review-muted:       #657386;

	/* --- typography -------------------------------------------------------
	   The source declares Inter + Playfair Display and loads NEITHER, so it
	   renders Arial/Times. We self-host both deliberately — PROJECT-BRIEF
	   open question 6. Fallbacks kept identical to the source's stacks so a
	   missing woff2 degrades exactly the way the source already looks.

	   ⚠ WHICH FONT GOES WHERE — measured, not assumed.
	   The source's BASE rule is `h1,h2,h3,h4,h5,h6 { Playfair Display }`, but
	   every homepage and PDP component then OVERRIDES back to Inter:
	   .factory-hero h1 · .factory-section-title · .dashboard-tile h3 ·
	   .warehouse-card h3 · .quality-step h3 · .cta-card h3 ·
	   .product-clean-name · .product-clean-intro h2 · .product-clean-copy h2/h3
	   …so the homepage is Inter throughout and Playfair survives only where
	   nothing overrides it (campaign pages, COA titles, related-products).
	   Reading the base rule alone and styling every heading as a serif is
	   wrong — that mistake shipped here once already.                        */
	--wbs-font-body:      "Inter", "Helvetica Neue", Arial, sans-serif;
	--wbs-font-heading:   "Inter", "Helvetica Neue", Arial, sans-serif;
	--wbs-font-display:   "Playfair Display", Georgia, "Times New Roman", serif;
	--wbs-font-ui:        "Poppins", "Inter", "Helvetica Neue", Arial, sans-serif;

	/* --- layout ------------------------------------------------------------ */
	--wbs-container:      1200px;
	--wbs-gutter:         clamp(16px, 4vw, 32px);
	--wbs-radius:         12px;
	--wbs-radius-lg:      18px;
	--wbs-radius-pill:    999px;

	--wbs-shadow-sm:      0 1px 2px rgba(16, 42, 58, .06);
	--wbs-shadow:         0 8px 24px rgba(16, 42, 58, .08);
	--wbs-shadow-lg:      0 12px 40px rgba(16, 42, 58, .14);
}