/*
 * Design tokens — Cream Chargers USA
 *
 * Palette reasoning: this is a food-grade industrial-supply catalogue, not a DTC
 * lifestyle brand. Steel, cream, burnished copper — a specialty trade-supplier feel
 * (think a well-run McMaster-Carr crossed with a serious food-service catalogue),
 * not a candy-colored consumer storefront. Deliberately avoids the two most common
 * "AI-generated site" tells: Inter/system-ui type and blue-purple gradient accents.
 */

:root {
	/* --- Neutrals: warm, not cold-blue-black --- */
	--ccu-ink:        #1c1a17;
	--ccu-ink-soft:   #3a352e;
	--ccu-steel:      #6b6459;
	--ccu-steel-mist: #a39c8f;
	--ccu-line:       #ddd5c7;
	--ccu-cream:      #f6f1e7;
	--ccu-cream-deep: #ede4d2;
	--ccu-white:      #fffdf9;

	/* --- Accent: burnished copper, used sparingly --- */
	--ccu-copper:      #b5652b;
	--ccu-copper-dark: #8f4d1f;
	--ccu-copper-tint: #f0dcc6;

	/* --- Signal (compliance / trade states — kept out of the copper family
	       on purpose, so a "route to support" notice never reads as a promo) --- */
	--ccu-signal-go:    #4d6a4d;
	--ccu-signal-check: #a3781f;
	--ccu-signal-stop:  #8c3a2c;

	/* --- Type --- */
	--ccu-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--ccu-font-body:    "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
	--ccu-font-mono:    "IBM Plex Mono", ui-monospace, monospace;

	/* Fluid type scale — clamps so headlines don't feel templated-in at every
	   breakpoint via fixed px jumps. */
	--ccu-size-body:     1rem;
	--ccu-size-small:    0.875rem;
	--ccu-size-eyebrow:  0.8125rem;
	--ccu-size-h4:       clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
	--ccu-size-h3:       clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem);
	--ccu-size-h2:       clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
	--ccu-size-h1:       clamp(2.4rem, 1.6rem + 3.2vw, 4rem);

	--ccu-leading-tight: 1.1;
	--ccu-leading-snug:  1.3;
	--ccu-leading-body:  1.6;

	/* --- Spacing scale (4px base) --- */
	--ccu-space-1: 0.25rem;
	--ccu-space-2: 0.5rem;
	--ccu-space-3: 0.75rem;
	--ccu-space-4: 1rem;
	--ccu-space-6: 1.5rem;
	--ccu-space-8: 2rem;
	--ccu-space-12: 3rem;
	--ccu-space-16: 4rem;
	--ccu-space-24: 6rem;
	--ccu-space-32: 8rem;

	/* --- Shape / structure --- */
	--ccu-radius-sm: 2px;
	--ccu-radius-md: 3px;
	--ccu-border: 1px solid var(--ccu-line);
	--ccu-content-width: 1240px;
	--ccu-content-width-narrow: 780px;

	--ccu-shadow-card: 0 1px 2px rgba(28, 26, 23, 0.06), 0 6px 20px rgba(28, 26, 23, 0.05);
}