/* ========================================================================== HerbXMedica — tokens.css The single source of truth. Every colour, font, radius, shadow and timing used anywhere on the site resolves to a variable declared here. Editing this file alone must be enough to reskin the entire site. Woodmart mapping for each token lives in README.md. ========================================================================== */ :root { /* ---------- Brand palette ---------------------------------------------- */ --hxm-ink: #16261D; /* body text, headings */ --hxm-forest: #14432F; /* dark sections, footer, stuck header */ --hxm-green: #2C6A48; /* secondary, links, icon fills */ --hxm-leaf: #3E7D52; /* accent FILL — dark enough to carry white text */ --hxm-turmeric: #D89B34; /* sparing accent — badges, ratings, offers */ --hxm-mist: #EDF0E4; /* alternate section background — warm */ --hxm-paper: #FAF8F1; /* page background — warm ivory, not cool white */ --hxm-line: #DFE1D2; /* hairlines, card borders */ --hxm-muted: #5E6B58; /* secondary text */ /* ---------- Derived surfaces (never new hues, only alpha/mix) ----------- */ --hxm-white: #FFFFFF; /* The old sage, kept for one job only: text and icons on forest, where the fill accent above would sit at 2.4:1. Never use it as a background. */ --hxm-leaf-light: #A9C98A; --hxm-forest-deep: #0C2A1E; --hxm-leaf-soft: rgba(169, 201, 138, 0.22); --hxm-leaf-softer: rgba(169, 201, 138, 0.11); --hxm-green-soft: rgba(44, 106, 72, 0.10); --hxm-turmeric-soft: rgba(216, 155, 52, 0.16); /* Same hue darkened for FOREGROUND use on light surfaces — --hxm-turmeric itself only clears 2.2:1 on paper, which is too low for a meaningful mark. */ --hxm-turmeric-ink: #A06A12; --hxm-ink-soft: rgba(22, 38, 29, 0.06); --hxm-line-strong: #CBD0BB; --hxm-on-dark: #EDF1E4; --hxm-on-dark-muted: rgba(237, 241, 228, 0.68); --hxm-on-dark-line: rgba(237, 241, 228, 0.16); /* ---------- Overlays and scrims ---------------------------------------- Alpha derivations of the palette, used over photography and on dark panels. Kept here so a reskin carries them along with the base hues. */ --hxm-scrim-0: rgba(12, 42, 30, 0); --hxm-scrim-42: rgba(12, 42, 30, 0.42); --hxm-scrim-50: rgba(12, 42, 30, 0.50); --hxm-scrim-62: rgba(12, 42, 30, 0.62); --hxm-scrim-86: rgba(12, 42, 30, 0.86); --hxm-scrim-90: rgba(12, 42, 30, 0.90); --hxm-on-image: rgba(255, 255, 255, 0.78); --hxm-on-image-dim: rgba(255, 255, 255, 0.70); --hxm-on-image-soft: rgba(255, 255, 255, 0.50); --hxm-on-image-faint: rgba(255, 255, 255, 0.28); --hxm-on-image-veil: rgba(255, 255, 255, 0.20); --hxm-on-image-rule: rgba(255, 255, 255, 0.16); --hxm-on-image-none: rgba(255, 255, 255, 0); --hxm-shimmer: rgba(255, 255, 255, 0.72); --hxm-on-dark-tint: rgba(237, 241, 228, 0.06); --hxm-on-dark-tint-up: rgba(237, 241, 228, 0.10); --hxm-glass: rgba(250, 248, 241, 0.92); --hxm-leaf-ring: rgba(169, 201, 138, 0.26); --hxm-shadow-bar: 0 -4px 20px rgba(22, 38, 29, 0.06); /* ---------- Semantic ---------------------------------------------------- */ --hxm-danger: #B23B2C; --hxm-success: #2C6A48; --hxm-whatsapp: #25D366; --hxm-whatsapp-deep: #128C7E; --hxm-whatsapp-ink: #0A2A1C; --hxm-whatsapp-dot: #7BF7A8; --hxm-whatsapp-glow: rgba(37, 211, 102, 0.45); /* ---------- Typography -------------------------------------------------- */ --hxm-font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; --hxm-font-body: 'Inter Tight', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Utility / label layer. Was IBM Plex Mono at 500 with 0.08em tracking; that read too thin and too widely spaced, so it is now a solid semibold sans with modest tracking. */ --hxm-font-label: 'Inter Tight', 'Segoe UI', system-ui, -apple-system, sans-serif; --hxm-font-deva: 'Noto Sans Devanagari', 'Nirmala UI', var(--hxm-font-body); /* Type scale — 12 / 14 / 16 / 18 / 22 / 28 / 36 / 48 / 64 */ /* Deliberate hierarchy, not a blind ramp: h1 48–64 h2 32–40 h3 20–24 body 16–18 supporting 14 min labels 12–13 */ --hxm-fs-label-sm: 0.75rem; /* 12 — smallest label */ --hxm-fs-label: 0.8125rem; /* 13 — standard label */ --hxm-fs-3xs: 0.8125rem; /* 13 — small meta */ --hxm-fs-2xs: 0.875rem; /* 14 — supporting */ --hxm-fs-xs: 1rem; /* 16 — body */ --hxm-fs-sm: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); /* 16 → 18 body lg */ --hxm-fs-md: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem); /* 18 → 20 */ --hxm-fs-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /* 20 → 24 h3 */ --hxm-fs-xl: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem); /* 24 → 30 */ --hxm-fs-2xl: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem); /* 28 → 40 h2 */ --hxm-fs-3xl: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); /* 36 → 64 h1 */ --hxm-fs-page: clamp(2rem, 1.55rem + 2vw, 3rem); /* 32 → 48 page h1 */ --hxm-lh-tight: 1.08; --hxm-lh-snug: 1.24; --hxm-lh-body: 1.65; --hxm-ls-label: 0.04em; --hxm-ls-tight: -0.02em; /* ---------- Layout ------------------------------------------------------ */ /* Widened from the static build's 1222px at the client's request, 2026-08-30. This is the one deliberate departure from the frozen build's measurements: every container-bounded layout is 278px wider, so the product grid, the shop sidebar split and the crude 3-up all size up with it. Verified at 1500, 1440, 1024, 768 and 360. */ --hxm-container: 1500px; --hxm-gutter: 15px; --hxm-pad-x: 20px; /* mobile section padding, overridden responsively */ /* Three deliberate rhythms rather than one. Dominant sections breathe, supporting sections sit closer, connectors are tight. */ --hxm-section-y: clamp(64px, 7vw, 104px); --hxm-section-y-lg: clamp(80px, 9vw, 136px); --hxm-section-y-sm: clamp(44px, 5vw, 72px); /* ---------- Shape ------------------------------------------------------- */ --hxm-r-xs: 4px; /* inputs, chips */ --hxm-r-md: 16px; /* cards */ --hxm-r-lg: 28px; /* feature and banner blocks */ --hxm-r-pill: 999px; --hxm-leaf-arc: 120px 0 120px 0; --hxm-leaf-arc-sm: 64px 0 64px 0; /* ---------- Elevation --------------------------------------------------- */ --hxm-shadow-hair: 0 1px 0 var(--hxm-line); --hxm-shadow-sm: 0 2px 8px rgba(22, 38, 29, 0.05); --hxm-shadow-md: 0 10px 28px rgba(22, 38, 29, 0.08); --hxm-shadow-lg: 0 24px 60px rgba(22, 38, 29, 0.12); --hxm-shadow-head: 0 1px 0 var(--hxm-line), 0 6px 24px rgba(22, 38, 29, 0.06); --hxm-shadow-wa: 0 10px 30px rgba(37, 211, 102, 0.35); /* ---------- Motion ------------------------------------------------------ */ --hxm-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --hxm-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --hxm-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */ --hxm-t-fast: 160ms; --hxm-t-base: 240ms; --hxm-t-slow: 600ms; /* ---------- Focus ------------------------------------------------------- */ --hxm-focus-ring: 2px solid var(--hxm-green); --hxm-focus-offset: 3px; /* ---------- Header metrics ---------------------------------------------- The header is fixed, so the room it used to take up in the flow is reserved by --hxm-head-h on instead. These three rows are the whole of that height: change a row here and the reserved space follows it. The 1px is the main bar's bottom border — the nav bar's is already inside its own declared height, everything here being border-box. */ --hxm-announce-h: 38px; --hxm-mainbar-h: 112px; --hxm-navbar-h: 54px; --hxm-head-h: calc(var(--hxm-announce-h) + var(--hxm-mainbar-h) + var(--hxm-navbar-h) + 1px); /* ---------- Stacking ---------------------------------------------------- */ --hxm-z-sticky-bar: 8000; --hxm-z-header: 8500; --hxm-z-drawer: 9200; --hxm-z-modal: 9500; --hxm-z-float: 9990; --hxm-z-preloader: 9999; } /* The announcement bar is dismissible. ui.js puts this on when it goes, so the header stops reserving room for a row that is no longer there. */ .hxm-announce-off { --hxm-announce-h: 0px; } /* ---------- Dark-scope overrides ---------------------------------------- Anything sitting on forest re-declares the focus ring so it stays visible. Redeclaring the custom property is enough — every :focus-visible rule already resolves through it. */ .hxm-hero, .hxm-footer, .hxm-section--feature, .hxm-preloader, .hxm-labgrid, [class*="--on-dark"] { --hxm-focus-ring: 2px solid var(--hxm-leaf-light); }