/* Wild Vibes — design tokens. Defined once on :root. Nothing else in the site may invent a colour, a font size, a radius or a shadow. Reach for a token or add one here. Contrast rule (PATTERNS §1): never --wv-lime text on white, never white text on --wv-lime. Lime is a ground for dark ink, or an accent stroke. */ :root { color-scheme: light; /* ---------------------------------------------------------------- */ /* Palette */ /* ---------------------------------------------------------------- */ --wv-lime: #C5E973; /* signature accent */ --wv-lime-soft: #DFF3B4; /* tints */ --wv-lime-deep: #A8CF4D; /* accent hover / borders on white */ --wv-forest: #4D680E; /* deep olive — headings, doodles */ --wv-forest-dk: #2F4108; /* darkest olive */ --wv-ink: #12140F; /* body text */ --wv-ink-soft: #55604A; /* muted text */ --wv-paper: #FFFFFF; /* ground */ --wv-paper-warm: #F7FAF1; /* alternate section ground */ --wv-line: #E3EAD6; /* hairlines */ /* Derived — for dark grounds. Body text on dark is always --wv-mist. */ --wv-mist: #F2F6EA; /* body text on dark */ --wv-mist-soft: #C8D6AE; /* muted text on dark (7.1:1 on dk) */ --wv-line-dark: #4A621A; /* hairlines on dark */ --wv-forest-mid: #3C5310; /* raised surface on a dark ground */ /* Status / utility */ --wv-warn: #8A5A05; /* note--warn text, 4.9:1 on warm */ --wv-warn-bg: #FDF4E0; --wv-warn-line: #EBD8A8; --wv-error: #A32A16; /* field errors, 5.3:1 on white */ --wv-error-bg: #FDF1EE; --wv-wa: #0E7A6C; /* WhatsApp green, darkened to 5.2:1 */ --wv-wa-dk: #0A6155; /* ---------------------------------------------------------------- */ /* Context vars — sections re-point these, components read them. */ /* Defaults here = a white "paper" ground. */ /* ---------------------------------------------------------------- */ --ctx-bg: var(--wv-paper); --ctx-fg: var(--wv-ink); --ctx-muted: var(--wv-ink-soft); --ctx-line: var(--wv-line); --ctx-head: var(--wv-forest); /* heading colour */ --ctx-accent: var(--wv-forest); /* kicker rule, small marks */ --ctx-doodle: var(--wv-forest); /* doodle stroke */ --ctx-card: var(--wv-paper); /* card surface */ --ctx-card-2: var(--wv-paper-warm); /* card surface, alt */ --ctx-link: var(--wv-forest); --ctx-shadow: var(--sh-1); /* ---------------------------------------------------------------- */ /* Type */ /* ---------------------------------------------------------------- */ /* System fonts only — nothing to download, nothing to go wrong, and the page paints with its real type on the first frame. One family throughout; size and weight carry the hierarchy instead of a second typeface. */ --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-display: var(--font-body); /* Fluid scale — 390px → 1440px viewport. */ --fs-hero: clamp(2.15rem, 1.35rem + 3.3vw, 3.9rem); --fs-h1: clamp(1.85rem, 1.35rem + 2.05vw, 2.95rem); --fs-h2: clamp(1.5rem, 1.22rem + 1.15vw, 2.15rem); --fs-h3: clamp(1.14rem, 1.06rem + 0.34vw, 1.35rem); --fs-h4: clamp(1.06rem, 1.01rem + 0.21vw, 1.18rem); --fs-lead: clamp(1.06rem, 0.99rem + 0.31vw, 1.28rem); --fs-body: clamp(1rem, 0.98rem + 0.1vw, 1.06rem); --fs-small: 0.875rem; --fs-micro: 0.775rem; --lh-tight: 1.04; --lh-head: 1.14; --lh-snug: 1.35; --lh-body: 1.65; --ls-tight: -0.028em; --ls-head: -0.018em; --ls-kicker: 0.15em; --fw-body: 400; --fw-medium: 500; --fw-bold: 700; --fw-regular: 400; --fw-display: 600; --fw-display-bold: 700; /* Measure */ --measure: 62ch; --measure-narrow: 46ch; /* ---------------------------------------------------------------- */ /* Space */ /* ---------------------------------------------------------------- */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 2.75rem; /* 44 */ --sp-8: 3.75rem; /* 60 */ --sp-9: 5rem; /* 80 */ --sp-10: 6.5rem; /* 104 */ --sp-11: 8.5rem; /* 136 */ --sp-12: 11rem; /* 176 */ /* Vertical rhythm for sections — fluid. */ --sec-y: clamp(3rem, 2.1rem + 3.6vw, 5.25rem); --sec-y-lg: clamp(3.75rem, 2.4rem + 5.4vw, 6.75rem); --sec-y-sm: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem); --gap-grid: clamp(1.25rem, 0.8rem + 1.9vw, 2.25rem); /* ---------------------------------------------------------------- */ /* Layout */ /* ---------------------------------------------------------------- */ --wrap: 1200px; --wrap-narrow: 760px; --wrap-wide: 1400px; --wrap-pad: clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem); --head-h: 4.75rem; /* 76px resting header */ --head-h-stuck: 3.75rem; /* 60px condensed header */ --tap: 2.75rem; /* 44px minimum touch target */ /* ---------------------------------------------------------------- */ /* Radii */ /* ---------------------------------------------------------------- */ --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 40px; --r-pill: 999px; /* ---------------------------------------------------------------- */ /* Shadows — olive-tinted, never neutral grey */ /* ---------------------------------------------------------------- */ --sh-1: 0 1px 2px rgba(30, 45, 8, 0.05), 0 4px 12px rgba(30, 45, 8, 0.05); --sh-2: 0 2px 4px rgba(30, 45, 8, 0.05), 0 10px 26px rgba(30, 45, 8, 0.08); --sh-3: 0 4px 8px rgba(30, 45, 8, 0.06), 0 22px 52px rgba(30, 45, 8, 0.13); --sh-inset: inset 0 0 0 1px var(--ctx-line); --sh-ring: 0 0 0 3px rgba(168, 207, 77, 0.42); /* ---------------------------------------------------------------- */ /* Motion */ /* ---------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.75, 0.28, 1); --ease-in-out: cubic-bezier(0.62, 0.02, 0.32, 1); --ease-spring: cubic-bezier(0.34, 1.32, 0.44, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-1: 140ms; /* micro — colour, opacity */ --dur-2: 260ms; /* controls, hovers */ --dur-3: 460ms; /* panels, lightbox */ --dur-4: 780ms; /* reveals */ --dur-5: 1400ms; /* doodle draw-on */ --reveal-rise: 22px; --reveal-step: 70ms; /* per-child stagger delay */ /* ---------------------------------------------------------------- */ /* Layers */ /* ---------------------------------------------------------------- */ --z-under: -1; --z-base: 0; --z-doodle: 1; --z-raised: 2; --z-sticky: 100; --z-head: 120; --z-drawer: 200; --z-overlay: 300; --z-lightbox:400; --z-toast: 500; --z-skip: 600; }