/* ========================================================================== Zavana — Design Tokens Source: "WellFest Ticketing Page" Figma (WellFest Uganda 2026, a Gem Zavanna Production) — file 7oirLCch5NhyL5yfuCnTf8, last modified 2026-08-04. THESE ARE THE REAL VALUES, read from the Figma REST API node tree — not sampled from a render. Every colour, family and size below appears verbatim in the design file. THIS IS THE SWAP POINT. Nothing else in the theme hardcodes a hex or a px type size. ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. BRAND PALETTE (exact, from Figma) ---------------------------------------------------------------------- */ /* Royal blue — wordmark, headings, ticket panels, screening & pillars bands. */ --zv-primary: #004aad; --zv-primary-hover: #003a88; --zv-primary-dark: #002d6b; --zv-primary-soft: #e0eaf7; --zv-primary-contrast: #ffffff; /* Wellness green — buttons, accent words, tag pills, card kickers. */ --zv-accent: #80cc28; --zv-accent-hover: #6cae1f; --zv-accent-bright: #8dba58; /* the muted green ticket panels */ --zv-accent-soft: #eef7e2; /* * ACCESSIBILITY — the brand green is light (relative luminance 0.48), so * white text on it lands at 1.98:1 against a 4.5:1 requirement. Rather than * alter the brand fill, text sitting ON green (and on orange) uses plum, * which measures 9.16:1 on green and 7.75:1 on orange. * * Set --zv-on-accent to #ffffff to restore the Figma's white-on-green if a * brand guideline requires it — the contrast failure returns with it. */ --zv-on-accent: var(--zv-plum); --zv-accent-contrast: #16290a; /* * Green TEXT on a light ground needs its own darker value — the brand green * reads 1.80:1 on mint. Same 88deg hue, lower lightness. * --zv-accent-ink 4.98:1 on mint — small text (kickers, labels) * --zv-accent-display 3.56:1 on mint — large text only (24px+ headings) */ --zv-accent-ink: #477512; --zv-accent-display: #578f16; /* * ...and small green text on the BLUE band needs to go the other way. The * brand green reads 4.10:1 on #004aad — just under AA. Two steps lighter, * same hue, gives 4.81:1. */ --zv-accent-on-dark: #92db3d; /* Dark plum — marquee bar, footer, heading ink. */ --zv-plum: #1f0c31; --zv-plum-deep: #1f0c31; --zv-plum-soft: #241a33; --zv-yellow: #fad02c; --zv-yellow-contrast: #1f0c31; --zv-orange: #ff8b06; --zv-orange-hover: #e07600; --zv-orange-contrast: #241701; /* ---------------------------------------------------------------------- 2. NEUTRALS & SURFACES ---------------------------------------------------------------------- */ --zv-ink: #1f0c31; /* headings */ --zv-body: #241a33; /* body copy — a dark plum, not a grey */ --zv-muted: #6b6478; --zv-warm: #80cc28; /* highlight-card kickers are green */ --zv-line: #ded9d0; --zv-line-strong: #c9cedb; --zv-surface: #ffffff; /* cards */ --zv-surface-alt: #faf7f0; /* warm off-white panels */ --zv-surface-sunken: #d9d9d9; /* image placeholder ground */ /* * The page ground. In the design the ENTIRE frame is this mint — the * hero, partners, highlights, tickets and payment sections all sit on it. * Only the screening/pillars bands (blue) and the marquee/footer (plum) * break out of it. There is no white section. */ --zv-surface-mint: #eef7e2; --zv-surface-mint-soft: #f4faec; --zv-success: #16a34a; --zv-warning: #f59e0b; --zv-danger: #dc2626; /* ---------------------------------------------------------------------- 3. TYPOGRAPHY (exact families, from Figma) Fraunces — display serif: wordmark, most section headings, card titles Merriweather— serif: the pillars heading, the Health Checks seal, Card Payment Montserrat — sans: all body copy, labels, buttons, prices ---------------------------------------------------------------------- */ --zv-font-display: "Fraunces", Georgia, "Times New Roman", serif; --zv-font-heading: "Fraunces", Georgia, "Times New Roman", serif; --zv-font-serif: "Merriweather", Georgia, "Times New Roman", serif; --zv-font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --zv-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* * Sizes below are the Figma values (1440px frame) expressed as fluid * clamps, so the max matches the design exactly at desktop width. */ --zv-text-xs: clamp(0.625rem, 0.60rem + 0.10vw, 0.688rem); /* 10–11 labels */ --zv-text-sm: clamp(0.75rem, 0.73rem + 0.09vw, 0.813rem); /* 12–13 small body */ --zv-text-base: clamp(0.875rem, 0.85rem + 0.10vw, 0.938rem); /* 14–15 body */ --zv-text-md: clamp(0.938rem, 0.90rem + 0.14vw, 1.063rem); /* 15–17 lede */ --zv-text-lg: clamp(1.063rem, 0.99rem + 0.35vw, 1.25rem); /* 17–20 card titles */ --zv-text-xl: clamp(1.25rem, 1.10rem + 0.70vw, 1.5rem); /* 20–24 labels/prices */ --zv-text-2xl: clamp(1.5rem, 1.22rem + 1.39vw, 2rem); /* 24–32 prices */ --zv-text-3xl: clamp(1.875rem, 1.35rem + 2.60vw, 2.75rem); /* 30–44 section heads */ --zv-text-4xl: clamp(2.5rem, 1.15rem + 6.75vw, 5.625rem); /* 40–90 "Pick your pass." */ --zv-text-5xl: clamp(3.5rem, 1.06rem + 12.2vw, 9.375rem); /* 56–150 wordmark */ --zv-weight-regular: 400; --zv-weight-medium: 500; --zv-weight-semibold: 600; --zv-weight-bold: 700; --zv-weight-black: 900; /* Figma line heights are a consistent ~1.22 on display, 1.22 on body. */ --zv-leading-tight: 1.22; --zv-leading-snug: 1.3; --zv-leading-normal: 1.5; --zv-leading-relaxed: 1.7; --zv-tracking-tight: -0.01em; --zv-tracking-normal: 0; --zv-tracking-wide: 0.06em; --zv-tracking-wider: 0.12em; /* ---------------------------------------------------------------------- 4. SPACING — 4px base ---------------------------------------------------------------------- */ --zv-space-1: 0.25rem; --zv-space-2: 0.5rem; --zv-space-3: 0.75rem; --zv-space-4: 1rem; --zv-space-5: 1.5rem; --zv-space-6: 2rem; --zv-space-7: 3rem; --zv-space-8: 4rem; --zv-space-9: 6rem; --zv-section-y: clamp(2.5rem, 1.2rem + 4.5vw, 4.5rem); /* ---------------------------------------------------------------------- 5. LAYOUT — design frame is 1440 with ~114px side margins. ---------------------------------------------------------------------- */ --zv-container: 1212px; --zv-container-wide: 1440px; --zv-container-text: 62ch; --zv-gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem); --zv-header-height: 72px; /* ---------------------------------------------------------------------- 6. RADII, SHADOWS, MOTION — radii are the design's 5/10/15/20/30. ---------------------------------------------------------------------- */ --zv-radius-sm: 5px; --zv-radius-md: 10px; --zv-radius-lg: 15px; --zv-radius-xl: 20px; --zv-radius-pill: 30px; --zv-radius-full: 999px; --zv-shadow-sm: 0 1px 2px rgba(31, 12, 49, 0.06); --zv-shadow-md: 0 4px 14px rgba(31, 12, 49, 0.08); --zv-shadow-lg: 0 14px 38px rgba(31, 12, 49, 0.12); --zv-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--zv-primary) 38%, transparent); --zv-ease: cubic-bezier(0.4, 0, 0.2, 1); --zv-duration: 180ms; --zv-z-header: 100; --zv-z-overlay: 200; --zv-z-modal: 300; } @media (prefers-reduced-motion: reduce) { :root { --zv-duration: 0ms; } }