/* ========================================================================== Experience West Africa — Design Tokens · "The Loom" Single source of truth. No colour, font, duration or easing enters the codebase except through a token defined here. Palette note: WARM earth-ground Loom palette (client feedback: the indigo read as dull). system proven on the TWA build, with the two ground values moved from the operator's purple back to indigo — see PHASE1-PLAN.md §2.) Contrast pairs, the fill-vs-text rule and every derivation carry over unchanged. ========================================================================== */ :root { /* --- Ground — LIGHT & BRIGHT (client direction) ------------------------- Warm ivory page, the visitghana-style airy tourism feel. NOTE the token ROLES: --ink = page ground (now LIGHT); --bone = primary text (now DARK). The names are legacy; roles are ground / foreground. Two roles that were the same colour in the dark theme now diverge and get their own tokens: --on-accent dark text on gold/clay/jade fills --on-image light text over photographs and dark blocks --scrim dark overlay laid over images All ratios MEASURED on the relevant surface, not asserted. */ --ink: #FBF7EF; /* page ground warm ivory */ --ink-2: #F3EBDD; /* raised surface */ --ink-3: #E8DCC8; /* inset / deeper panel */ --on-accent: #241B12; /* dark text on gold/track fills (8.7:1 on gold) */ --on-image: #FBF7EF; /* light text over photos / dark footer */ --scrim: #17100A; /* dark base for image overlays (used via color-mix) */ /* --- Brand / structure (warm terracotta) -------------------------------- */ --earth: #7A3B22; /* terracotta fill; bone text on it 7.5:1 */ --earth-line: #C79A6C; /* warm border visible on ivory (non-text) */ --earth-lift: #A0552E; /* accent / structural, body-legal on ivory */ --earth-deep: #2A1B12; /* deep warm — the footer anchor block */ /* --- Accents ------------------------------------------------------------ Two forms: FILL (bright, dark text on it) and TEXT-ON-LIGHT (darker). Measured on ivory --ink: clay 5.4:1, jade 6.1:1 (both body-legal as text); gold is light so gold-AS-TEXT uses --gold-ink 5.4:1; bright --gold is fill-only on light (1.8:1). Clay=Heritage, Jade=Nature (semantic). */ --gold: #EFAE2A; /* kente gold — FILL (dark text on it) */ --gold-ink: #8A5D06; /* gold AS TEXT on light 5.39:1 */ --clay: #B0421E; /* laterite red 5.39:1 — text + fill(white text) */ --jade: #1B6B49; /* forest green 6.05:1 — text + fill(white text) */ /* --- Text (DARK on the light ground) ------------------------------------ */ --bone: #241B12; /* primary text 15.84:1 */ --bone-dim: #574636; /* secondary 8.42:1 */ --bone-mute: #6E5C48; /* meta 5.98:1 (5.40 on --ink-2) */ /* --- Lines — warm dark hairlines on the light ground -------------------- */ --line: rgba(58, 42, 30, 0.14); --line-firm: rgba(58, 42, 30, 0.28); --line-gold: rgba(138, 93, 6, 0.42); /* --- Deep section (for rhythm on the light base) ------------------------ Some sections invert to a warm-dark block; text on them is --on-image. */ --deep: #241B12; --deep-2: #2E2115; /* --- Type --------------------------------------------------------------- Self-hosted (assets/fonts/), font-display:swap, display face preloaded. No CDN in production. Display = variable grotesque; body = humanist sans; mono = utility voice for eyebrows/coords/dates. */ --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace; --step-hero: clamp(3.1rem, 1.2rem + 9.4vw, 8.75rem); --step-h1: clamp(2.4rem, 1.3rem + 5.2vw, 5rem); --step-h2: clamp(1.9rem, 1.3rem + 2.9vw, 3.25rem); --step-h3: clamp(1.3rem, 1.1rem + 1.1vw, 1.75rem); --lh-hero: 0.86; --lh-display: 0.95; --tr-hero: -0.045em; --tr-display: -0.035em; --step-body: clamp(0.9375rem, 0.86rem + 0.34vw, 1.0625rem); --step-lede: clamp(1.0625rem, 0.95rem + 0.6vw, 1.3125rem); --step-small: 0.875rem; --lh-body: 1.65; --step-util: clamp(0.656rem, 0.62rem + 0.16vw, 0.75rem); --tr-util: 0.22em; --tr-util-lg: 0.14em; /* --- Space / layout ----------------------------------------------------- */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --section-y: clamp(3.5rem, 2rem + 7vw, 8rem); --gutter: clamp(1.125rem, 0.6rem + 2.4vw, 3rem); --measure: 68ch; --shell: 1280px; /* --- Radius ------------------------------------------------------------ Restrained — a loom is a rectilinear woven grid, not pills. */ --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-full: 999px; /* --- Motion ------------------------------------------------------------ */ --ease: cubic-bezier(.16, 1, .3, 1); /* smooth ease-out (default) */ --ease-spring: cubic-bezier(.34, 1.56, .3, 1); /* gentle overshoot */ --ease-out: cubic-bezier(.22, 1, .36, 1); /* long, refined tail */ --ease-io: cubic-bezier(.65, 0, .35, 1); /* in-out for loops/sweeps */ --d-fast: 300ms; --d-base: 500ms; --d-slow: 700ms; --d-xslow: 900ms; --d-hero: 1200ms; /* --- Depth (tinted with the ground, never neutral black) --------------- */ --shadow-1: 0 1px 2px rgba(4, 3, 12, .5); --shadow-2: 0 12px 32px -8px rgba(4, 3, 12, .6); --shadow-3: 0 28px 64px -16px rgba(4, 3, 12, .75); /* --- Layers ------------------------------------------------------------ */ --z-threads: 1; --z-content: 10; --z-header: 100; --z-switch: 150; --z-wa: 200; --z-menu: 300; --z-viewer: 400; /* --- Theme tracks ------------------------------------------------------- Experience taxonomy colours, keyed so a page can set --track and the accents follow. Nature=jade, Heritage=clay, Culture=gold, Lifestyle=indigo-lift. */ --track-nature: var(--jade); --track-heritage: var(--clay); --track-culture: var(--gold); --track-lifestyle: var(--earth-lift); } @media (prefers-reduced-motion: reduce) { :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-xslow: 1ms; } }