/* ========================================================================== 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: #0D1B14; /* body text, headings */ --hxm-forest: #0F3D2E; /* dark sections, footer, stuck header */ --hxm-green: #1B6B3A; /* secondary, links, icon fills */ --hxm-leaf: #6FBE44; /* primary accent, CTAs, active states */ --hxm-turmeric: #E3A02A; /* sparing accent — badges, ratings, offers */ --hxm-mist: #EDF2EC; /* alternate section background */ --hxm-paper: #FBFCFA; /* page background */ --hxm-line: #DCE4DA; /* hairlines, card borders */ --hxm-muted: #5C6B60; /* secondary text */ /* ---------- Derived surfaces (never new hues, only alpha/mix) ----------- */ --hxm-white: #FFFFFF; --hxm-forest-deep: #0A2C21; --hxm-leaf-soft: rgba(111, 190, 68, 0.12); --hxm-leaf-softer: rgba(111, 190, 68, 0.06); --hxm-green-soft: rgba(27, 107, 58, 0.10); --hxm-turmeric-soft: rgba(227, 160, 42, 0.14); /* 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: #AD7415; --hxm-ink-soft: rgba(13, 27, 20, 0.06); --hxm-line-strong: #C7D3C4; --hxm-on-dark: #E8F0E6; --hxm-on-dark-muted: rgba(232, 240, 230, 0.66); --hxm-on-dark-line: rgba(232, 240, 230, 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(10, 44, 33, 0); --hxm-scrim-42: rgba(10, 44, 33, 0.42); --hxm-scrim-50: rgba(10, 44, 33, 0.50); --hxm-scrim-62: rgba(10, 44, 33, 0.62); --hxm-scrim-86: rgba(10, 44, 33, 0.86); --hxm-scrim-90: rgba(10, 44, 33, 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(232, 240, 230, 0.06); --hxm-on-dark-tint-up: rgba(232, 240, 230, 0.10); --hxm-glass: rgba(251, 252, 250, 0.92); --hxm-leaf-ring: rgba(111, 190, 68, 0.16); --hxm-shadow-bar: 0 -4px 20px rgba(13, 27, 20, 0.06); /* ---------- Semantic ---------------------------------------------------- */ --hxm-danger: #C0392B; --hxm-success: #1B6B3A; --hxm-whatsapp: #25D366; --hxm-whatsapp-deep: #128C7E; --hxm-whatsapp-ink: #06301F; --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 ------------------------------------------------------ */ --hxm-container: 1222px; /* Woodmart default site width */ --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(13, 27, 20, 0.05); --hxm-shadow-md: 0 10px 28px rgba(13, 27, 20, 0.08); --hxm-shadow-lg: 0 24px 60px rgba(13, 27, 20, 0.12); --hxm-shadow-head: 0 1px 0 var(--hxm-line), 0 6px 24px rgba(13, 27, 20, 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-t-fast: 160ms; --hxm-t-base: 240ms; --hxm-t-slow: 600ms; /* ---------- Focus ------------------------------------------------------- */ --hxm-focus-ring: 2px solid var(--hxm-leaf); --hxm-focus-offset: 3px; /* ---------- 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; }