/* SETL MAP — design tokens. Copied verbatim from DESIGN.md section 2. Do not redefine elsewhere. */ :root { /* ───── Surfaces (paper) ───── */ --paper: #F6EFE3; /* page background, cream paper */ --paper-2: #EDE2CF; /* second surface, wells, inactive tracks */ --paper-3: #E3D4BA; /* third tone, illustration shade 1, disabled fill */ --card: #FCF8F0; /* cards, sheets */ --card-2: #FFFDF8; /* raised/selected cards, form fields */ --line: #D8C9B0; /* hairlines, card borders */ --line-strong: #B9A787; /* hover borders, illustration shade 2, dashed ghosts */ --line-soft: rgba(42, 33, 27, .10); /* ───── Ink (text) ───── */ --ink: #2A211B; /* espresso: text + illustration outline. 14:1 on --paper */ --ink-2: #5E5043; /* secondary text, ≈6.8:1 on --paper */ --ink-3: #6F6052; /* captions/footnotes, 5.3:1 on --paper, 4.7:1 on --paper-2 */ /* ───── Light & accents ───── */ --sun: #F2A93B; /* sun, thumbs, focus ring, fills. NEVER text on light surfaces */ --sun-deep: #8A5A00; /* accent TEXT/ICON on light surfaces, 5.2:1 on --paper */ --glow: #FFD98F; /* beam, highlight, winner tint, CTA on dusk */ --glow-soft: rgba(255, 217, 143, .45); --terra: #B84A32; /* primary CTA bg (white text ≈5.2:1), italic accent word in headings */ --terra-hover: #A53F29; --terra-press: #8F3320; --terra-soft: #F2D6CC; /* tint, text on it: --terra-press (6.2:1) */ --sage: #7F9A7B; /* nature in illustration, decoration only */ --sage-soft: #DCE6D8; --sky: #C9DDDF; /* midday sky */ --sky-deep: #7FA7AE; /* 5th figure colour, cool accents */ --dusk: #2B2A3D; /* dark surface (evening: screen 06, form block, footer) */ --dusk-2: #413A57; /* second dark, night window */ --dusk-3: #1C1B2A; /* deepest dark, dusk gradient top */ --star: #FFF3D6; --on-dusk: #F6EFE3; /* text on dusk, ≈12:1 */ --on-dusk-2: #D9D0DE; /* secondary text on dusk, ≈9:1 */ /* ───── Semantic ───── */ --ok: #4F7F5B; /* icons, success strokes (≥3:1) */ --ok-ink: #3C6747; /* success text, 5.7:1 on --paper */ --warn: #C98A1B; --warn-ink: #7A5200; /* warning text, 6.1:1 */ --err: #A8352B; /* error text AND border, 5.7:1 on --paper */ --err-soft: #F6DAD5; /* ───── People (faceless silhouettes in the scene and on cards) ───── */ --fig-1: #B84A32; /* adult A (terra) */ --fig-2: #4F7F5B; /* adult B */ --fig-3: #F2A93B; /* child */ --fig-4: #413A57; /* teen */ --fig-5: #7FA7AE; /* grandparent / 5th person */ /* ───── Runtime light variables (written by SetlMap.atmosphere on :root; defaults = 06:00) ───── */ --hour: 6; /* 0..24 */ --t: 0; /* day progress 0..1 = clamp((hour-6)/16.5, 0, 1) */ --sx: 1; /* shadow direction -1..1 = clamp(1 - 2*(hour-6)/13, -1, 1) */ --sky-top: #E6C2B6; --sky-mid: #F6C9A0; --sky-hor: #FBE3BE; --tint: #EFDFCB; /* page background tint at this hour (body background uses it) */ --lamp: 0; /* 0..1 lamps on */ --night: 0; /* 0..1 stars / moon */ --beam: .55; /* 0..1 window-beam intensity */ /* ───── Gradients ───── */ --grad-paper: linear-gradient(180deg, var(--card-2) 0%, var(--paper) 100%); --grad-sky: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-hor) 100%); --grad-dusk: linear-gradient(180deg, var(--dusk-3) 0%, var(--dusk) 62%, var(--dusk-2) 100%); --grad-sun: radial-gradient(circle at 36% 32%, #FFF0CC 0%, var(--glow) 34%, var(--sun) 72%); --grad-beam: linear-gradient(270deg, rgba(255, 217, 143, .78) 0%, rgba(255, 217, 143, 0) 100%); --grad-budget: linear-gradient(90deg, #F6C9A0 0%, #E9DCC4 30%, #C9DDDF 55%, #F2C26B 82%, #F2A93B 100%); --grad-fade-b: linear-gradient(180deg, rgba(252, 248, 240, 0) 0%, var(--card) 70%); /* under scrolling lists, above sticky CTA */ --grad-fade-t: linear-gradient(0deg, rgba(252, 248, 240, 0) 0%, var(--card) 70%); /* ───── Paper grain (static, one tile; applied at 6% by body::after) ───── */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .37 0 0 0 0 .24 0 0 0 0 .1 0 0 0 .8 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); /* ───── Spacing scale ───── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 144px; /* ───── Radii ───── */ --r-xs: 8px; --r-sm: 12px; --r-field: 16px; --r-lg: 20px; --r-card: 28px; --r-scene: 32px; --r-pill: 999px; --r-sheet: 28px 28px 0 0; /* ───── Shadows ("from the sun": --sx moves them) ───── */ --shadow-card: calc(var(--sx) * 24px) 30px 60px -22px rgba(94, 60, 24, .30), 0 2px 6px rgba(94, 60, 24, .08), inset 0 1px 0 rgba(255, 255, 255, .7); --shadow-scene: calc(var(--sx) * 32px) 40px 80px -30px rgba(94, 60, 24, .38), 0 3px 10px rgba(94, 60, 24, .10); --shadow-soft: 0 6px 18px -8px rgba(94, 60, 24, .25); --shadow-pick: 3px 4px 0 var(--ink); /* chunky selected state (answer cards, tuesday rows) */ --shadow-btn: 0 10px 24px -10px rgba(184, 74, 50, .55), inset 0 1px 0 rgba(255, 255, 255, .22); --shadow-sheet: 0 -14px 40px -18px rgba(94, 60, 24, .28); --shadow-dusk: 0 30px 80px -30px rgba(0, 0, 0, .55); /* ───── Glass (solid-ish, no blur needed; alpha ≥ .82) ───── */ --glass-paper: rgba(252, 248, 240, .86); --glass-dusk: rgba(43, 42, 61, .90); /* ───── Blur (one-shot effects only) ───── */ --blur-s: 6px; --blur-m: 12px; --blur-l: 24px; /* ───── Focus ring: 2px ink inner + 3px sun outer. Use as box-shadow. ───── */ --focus-ring: 0 0 0 2px var(--ink), 0 0 0 5px var(--sun); --focus-ring-dusk: 0 0 0 2px var(--dusk), 0 0 0 5px var(--sun); /* ───── Z layers ───── */ --z-bg: 0; --z-stage: 10; --z-scene: 20; --z-panel: 30; --z-sticky: 50; --z-chrome: 60; --z-wipe: 85; --z-grain: 90; --z-cursor: 100; --z-toast: 110; /* ───── Durations (JS mirror: SetlMap.D = {xs:.2, s:.45, m:.9, l:1.2, xl:1.4}) ───── */ --dur-press: .12s; --dur-xs: .2s; /* micro: hover, press, focus */ --dur-s: .45s; /* UI: chip, card, reveal of small blocks */ --dur-m: .9s; /* screen content, headline lines */ --dur-l: 1.2s; /* camera / viewBox / screen change */ --dur-xl: 1.4s; /* hero moments, intro, counters on results */ /* ───── Easings (CSS mirrors of the GSAP names in section 4) ───── */ --ease-out: cubic-bezier(.16, 1, .3, 1); /* "sunrise" — main exit/entrance */ --ease-in-out: cubic-bezier(.65, 0, .2, 1); /* "paper" — camera, screen changes */ --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* "settle" ≈ back.out(1.5) — things landing */ --ease-breath: cubic-bezier(.37, 0, .63, 1); /* sine.inOut — loops */ --ease-standard: cubic-bezier(.4, 0, .2, 1); /* colour/opacity micro transitions */ /* ───── Fonts ───── */ --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-text: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* ───── Type scale (rem; 1rem = 16px at <1920px) ───── */ --fs-h1: clamp(3.375rem, 7vw, 6.5rem); /* 54 → 104px, Cormorant 500, lh .94, -0.02em. Intro + results profile title */ --fs-h2: clamp(2.125rem, 4.2vw, 4rem); /* 34 → 64px, Cormorant 500, lh 1.0. Step questions */ --fs-h2-lg: clamp(2.375rem, 5vw, 4.75rem); /* 38 → 76px, short section titles on results */ --fs-h3: clamp(1.5rem, 2.6vw, 2.25rem); /* 24 → 36px, Cormorant 600, lh 1.05 */ --fs-clock: clamp(4.5rem, 15vw, 13.75rem); /* film clock, Cormorant 500 */ --fs-manifest: clamp(1.375rem, 2vw, 1.75rem); /* manifest line, Cormorant italic 500 */ --fs-lead: clamp(1.0625rem, 1.5vw, 1.375rem); /* 17 → 22px, Onest 400, lh 1.5 */ --fs-body: 1rem; /* 16px, lh 1.55 */ --fs-small: .875rem; /* 14px */ --fs-caption: .8125rem; /* 13px, Onest 500 uppercase, +0.08em */ --fs-micro: .75rem; /* 12px, footers, demo tag */ --fs-num-xl: clamp(2rem, 3.4vw, 3.5rem); /* big numbers: price-from, % — Onest 600 tabular */ --fs-num-lg: clamp(1.5rem, 2.2vw, 2rem); --lh-tight: .94; --lh-head: 1; --lh-lead: 1.5; --lh-body: 1.55; --track-display: -0.02em; --track-caption: .08em; /* ───── Layout ───── */ --container-max: 90rem; /* 1440px @16, grows with root font-size */ --panel-max: 34rem; /* content column width on desktop (≈5 cols) */ --page-pad: 20px; /* + env(safe-area-inset-*) */ --gutter: 12px; --header-h: 56px; --tap: 48px; /* default target; absolute minimum 44px */ --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --scene-h: 36svh; /* mobile scene height; screens override (see 7) */ --cta-bar-h: calc(76px + var(--safe-b)); /* ───── Cursor ───── */ --cursor-dot: 8px; --cursor-ring: 38px; --cursor-ring-lg: 72px; } /* Responsive overrides (tokens.css MUST include these) */ @media (min-width: 768px) { :root { --header-h: 64px; --page-pad: 32px; --gutter: 20px; } } @media (min-width: 1024px) { :root { --page-pad: 48px; --gutter: 24px; } } @media (min-width: 1920px) { html { font-size: 112.5%; } } /* 18px */ @media (min-width: 2400px) { html { font-size: 125%; } } /* 20px */ /* Dusk (evening) tone: apply data-tone="dusk" on a section/screen. Children use semantic vars. */ [data-tone="dusk"] { --bg: var(--dusk); --fg: var(--on-dusk); --fg-2: var(--on-dusk-2); --surface: var(--dusk-2); --hair: rgba(246, 239, 227, .18); --ring: var(--focus-ring-dusk); } :root, [data-tone="paper"] { --bg: var(--paper); --fg: var(--ink); --fg-2: var(--ink-2); --surface: var(--card); --hair: var(--line); --ring: var(--focus-ring); }