/*
 * Ultimate Dispensers - shared design tokens.
 * SHARED across all four sites. The ONLY per-site override is --ud-accent (assets/accent.css,
 * @imported AFTER this file by style.css). Never hardcode a brand colour in a block.
 *
 * The design is a LIGHT, trade-counter layout (bright, product-led, price-forward) with navy
 * reserved for small trust accents (footer, topbar, featured card, heritage side-card).
 * Hence two surface families: light (page/cards) + ink (navy accents).
 */

:root {
	/* ── Light surfaces (page + cards) — warm paper, not cool blue-grey ── */
	--ud-bg:          #f4f3ef;   /* page background                       */
	--ud-surface:     #ffffff;   /* cards / panels                        */
	--ud-surface-2:   #ece8e1;   /* subtle inset / warm panels            */
	--ud-line:        #e4e1d9;   /* hairlines on light                    */

	/* ── Ink surfaces (dark navy feature sections) ── */
	--ud-ink:         #0e1726;   /* hero / CTA / heritage / footer bg     */
	--ud-ink-2:       #15203a;   /* raised card on ink                    */
	--ud-ink-3:       #1b2740;   /* hover/border on ink                   */
	--ud-line-dark:   #27344f;   /* hairlines on ink                      */

	/* ── Text ── */
	--ud-text:        #16203a;   /* primary text on light                 */
	--ud-muted:       #5c6b84;   /* secondary text on light               */
	--ud-on-dark:     #e9eef7;   /* primary text on ink                   */
	--ud-on-dark-mut: #9fb0c8;   /* secondary text on ink                 */

	/* ── Accent (supplied by accent.css) ── */
	/* --ud-accent comes from the per-site override file. Derived shades use color-mix so a
	   site only sets one hex. Fallback shades are provided inline where used. */
	--ud-accent-ink:  #ffffff;   /* text colour that sits ON the accent   */
	/* Accent used for TEXT on light grounds (highlight words, eyebrows, links). Defaults to the
	   accent itself; lighter brand accents (cyan/sky/green) override this in accent.css with a
	   darkened, contrast-safe variant. Vivid --ud-accent stays for fills, badges and dark grounds. */
	--ud-accent-text: var(--ud-accent);

	/* ── Type ── */
	--ud-font-head: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ud-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ud-fs-eyebrow: 0.78rem;
	--ud-fs-body:    1.05rem;
	--ud-fs-lead:    1.25rem;
	--ud-fs-h4:      1.25rem;
	--ud-fs-h3:      1.7rem;
	--ud-fs-h2:      clamp(2rem, 1.3rem + 2.6vw, 3rem);
	--ud-fs-h1:      clamp(2.6rem, 1.6rem + 4vw, 4.4rem);
	--ud-lh-tight:   1.05;
	--ud-lh-body:    1.6;

	/* ── Layout ── */
	--ud-container:    1200px;
	--ud-container-wd: 1320px;
	--ud-gutter:       clamp(1.1rem, 0.6rem + 2vw, 2rem);
	--ud-header-h:     76px;
	--ud-section-y:    clamp(3.5rem, 2rem + 5vw, 6.5rem);

	/* ── Radii / shadow ── */
	--ud-radius:    14px;
	--ud-radius-sm: 9px;
	--ud-radius-lg: 22px;
	--ud-shadow:    0 18px 50px -24px rgba(14, 23, 38, 0.28);
	--ud-shadow-sm: 0 6px 22px -14px rgba(14, 23, 38, 0.30);

	/* ── Motion ── */
	--ud-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Accent fallback if accent.css is somehow missing - keep the site usable (master signal blue). */
:root { --ud-accent: var(--ud-accent, #2e6bff); }

/* ── Base reset / typography ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
/* clip (not hidden) contains the off-canvas drawer's off-screen position without making the
   root a scroll container - so position:sticky on the header keeps working. */
body {
	margin: 0;
	background: var(--ud-bg);
	color: var(--ud-text);
	font-family: var(--ud-font-body);
	font-size: var(--ud-fs-body);
	line-height: var(--ud-lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 { font-family: var(--ud-font-head); line-height: var(--ud-lh-tight); color: var(--ud-text); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.5em; }
h1 { font-size: var(--ud-fs-h1); }
h2 { font-size: var(--ud-fs-h2); }
h3 { font-size: var(--ud-fs-h3); }
h4 { font-size: var(--ud-fs-h4); }
p  { margin: 0 0 1em; }
a  { color: var(--ud-accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
iframe { max-width: 100%; }

/* ── Shared layout helpers ── */
.ud-container { width: 100%; max-width: var(--ud-container); margin-inline: auto; padding-inline: var(--ud-gutter); }
.ud-container--wide { max-width: var(--ud-container-wd); }
.ud-section { padding-block: var(--ud-section-y); }
.ud-section--ink { background: var(--ud-ink); color: var(--ud-on-dark); }
.ud-section--ink h1, .ud-section--ink h2, .ud-section--ink h3, .ud-section--ink h4 { color: var(--ud-on-dark); }
/* On dark chrome the vivid accent reads well, so restore it for accent-coloured text there. */
.ud-section--ink, .ud-topbar, .ud-footer, .ud-drawer { --ud-accent-text: var(--ud-accent); }

/* ── Eyebrow label ── */
.ud-eyebrow {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.55em;
	font-family: var(--ud-font-head);
	font-size: var(--ud-fs-eyebrow); font-weight: 600;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--ud-accent-text); margin: 0 0 1rem;
}
.ud-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--ud-accent); display: inline-block; }

/* ── Buttons ── */
.ud-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
	font-family: var(--ud-font-head); font-weight: 600; font-size: 0.98rem;
	padding: 0.85em 1.5em; border-radius: var(--ud-radius-sm);
	border: 1.5px solid transparent; cursor: pointer;
	transition: transform 0.18s var(--ud-ease), background-color 0.18s var(--ud-ease), border-color 0.18s var(--ud-ease), box-shadow 0.18s var(--ud-ease);
}
.ud-btn:hover { text-decoration: none; transform: translateY(-2px); }
.ud-btn--primary { background: var(--ud-accent); color: var(--ud-accent-ink); box-shadow: var(--ud-shadow-sm); }
.ud-btn--primary:hover { box-shadow: 0 14px 32px -14px var(--ud-accent); }
.ud-btn--ghost { background: transparent; color: var(--ud-text); border-color: var(--ud-line); }
.ud-section--ink .ud-btn--ghost { color: var(--ud-on-dark); border-color: var(--ud-line-dark); }
.ud-btn--ghost:hover { border-color: var(--ud-accent); color: var(--ud-accent-text); }
/* WhatsApp green is the recognised affordance - same on every style, never accent-tinted. */
.ud-btn--whatsapp { background: #25d366; color: #ffffff; box-shadow: var(--ud-shadow-sm); }
.ud-btn--whatsapp:hover { background: #1fbd5b; color: #ffffff; box-shadow: 0 14px 32px -14px rgba(13, 128, 73, 0.85); }
.ud-btn--whatsapp svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

/* ── Generic page chrome (prose, archives) ── */
.ud-muted { color: var(--ud-muted); }
.ud-link { color: var(--ud-accent-text); font-weight: 600; }
.ud-page-head { margin-bottom: 2rem; }
.ud-prose { font-size: 1.07rem; line-height: 1.75; }
.ud-prose :where(h2, h3) { margin-top: 1.8em; }
.ud-prose img { border-radius: var(--ud-radius-sm); margin-block: 1.5em; }
.ud-prose ul, .ud-prose ol { padding-left: 1.3em; margin-bottom: 1.2em; }
.ud-prose li { margin-bottom: 0.5em; }
.ud-prose a { text-decoration: underline; text-underline-offset: 2px; }
.ud-postlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.75rem; }
.ud-postcard { background: var(--ud-surface); border: 1px solid var(--ud-line); border-radius: var(--ud-radius); overflow: hidden; padding-bottom: 1.25rem; }
.ud-postcard__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.ud-postcard__title { font-size: 1.2rem; padding: 1rem 1.25rem 0; }
.ud-postcard__excerpt { padding: 0 1.25rem; color: var(--ud-muted); font-size: 0.97rem; }
.ud-postcard .ud-link { padding: 0 1.25rem; }
.ud-single__media img { width: 100%; border-radius: var(--ud-radius); margin-bottom: 1.75rem; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}