/* ===================================================================== Tatyana Spivak — Design Tokens (PROPOSAL) Reverse-engineered from the 8 site HTML files. NOT yet wired into pages. Each token lists the raw hex/values it replaces. Light-surface neutral ramp clusters 7 raw grays into 4 defensible steps; on dark/brand surfaces a separate white-opacity ramp (~10 raw steps -> 3 text + 2 surface tokens) is documented. Merge notes inline. ===================================================================== */ :root { /* ---------- Brand (consistent, no drift) ---------- */ --brand: #1C4942; /* replaces #1c4942 (×53) + bg/text/border-brand */ --brand-dark: #173C2F; /* replaces #173c2f (×9), primary-button hover */ /* ---------- Surfaces ---------- */ --surface: #FFFFFF; /* bg-white: cards, inputs, dropdowns */ --surface-cream: #F7F0F2; /* config cream (bg-cream ×81). NOTE: comment in index.html says #FAF7F4 — that is a doc stray, never used in markup. Canonical = #F7F0F2 */ --surface-blush: #FEF7F8; /* config blush (bg-blush ×8) */ /* ---------- Text / Neutral ramp (7 grays -> 4 steps) ---------- */ --ink: #1A1A1A; /* primary text. replaces #1a1a1a (×75). standalone, no merge */ --ink-2: #5B5B5B; /* secondary body. MERGES #5b5b5b (×37) + #6b6b6b (×52): two near-identical warm body grays -> darker, more legible. (#6b6b6b is folded IN here — no separate --ink-3, per the 4-step minimum-defensible-ramp decision in design-system.md) */ --muted: #7B798C; /* tertiary / eyebrow / idle nav-link. MERGES #7b798c (×85, dominant) + #6f6c7b (×1, lone cool-gray sibling) */ --muted-2: #9A9A9A; /* faint captions + form placeholder. MERGES #9a9a9a (×22) + #9a98a6 (×4, tinted placeholder twin) */ /* ---------- Borders ---------- */ --border: #E8E0D8; /* default warm hairline. replaces #e8e0d8 (×57). Also the canonical target for cool-gray drift border-gray-200 (#e5e7eb ×3) + border-gray-300 (#d1d5db ×3) */ --border-strong: #EFE7DF; /* near-duplicate warm border. replaces #efe7df (×8). Actually LIGHTER than --border; consider collapsing both into --border. Kept only if a 2nd weight is real. */ --border-cool: #F3F4F6; /* COOL-gray list/menu divider. replaces Tailwind border-gray-100 (×48, always `border-b border-gray-100`, in ALL 8 files — mobile-menu link separator). Genuinely distinct from the warm --border (cool vs warm). Also the target for bg-gray-100 (#f3f4f6 ×8) light fills. */ /* ---------- Neutral ramp — on dark / brand surfaces (white-opacity) ---------- */ /* 263 white-opacity uses across ~10 raw steps clustered into 3 text + 2 surface tokens. */ --on-dark-1: #FFFFFF; /* primary text on brand. text-white + white/95 (×8) */ --on-dark-2: rgba(255,255,255,0.85); /* body/lead on dark. MERGES white/90 (×76) + /85 (×6) + /80 (×43) */ --on-dark-3: rgba(255,255,255,0.70); /* muted/eyebrow/caption on dark. MERGES white/75 (×27) + /70 (×15) + /65 (×7) + /55 (×1) */ --on-dark-surface: rgba(255,255,255,0.12); /* translucent fills on brand. MERGES bg-white/10 (×24) + /15 (×19) */ --on-dark-border: rgba(255,255,255,0.40); /* hairlines/dividers on brand. border-white/40 (×28) + /15 (FAQ) */ /* ---------- Overlay scrim (on imagery) ---------- */ --overlay-scrim: rgba(0,0,0,0.50); /* image-darkening overlay. dominant bg-black/50 (×8); lighter drift: black/35 (×2), black/10 (×1) */ /* ---------- Accent ---------- */ --accent: #F59E0B; /* amber. replaces #f59e0b (×4): review-star ratings only */ /* ---------- Semantic (no dedicated palette in code) ---------- */ --success: var(--brand); /* no green-success token exists; reuse brand */ --attention: var(--accent); /* amber for attention/ratings */ /* no error/danger color present in source */ /* ---------- Typography: families ---------- */ --font-sans: 'DM Sans', sans-serif; /* body / UI default */ --font-serif: 'Marcellus', Georgia, serif; /* display headings + logo (×138) */ /* ---------- Typography: weights (DM Sans) ---------- */ --fw-normal: 400; /* serif headings (×7) */ --fw-medium: 500; /* DEFAULT UI weight (×415) */ --fw-semibold: 600; /* sub-heads (×60) */ --fw-extrabold:800; /* number emphasis (×8) */ --fw-black: 900; /* large numerals (×10) */ /* ---------- Typography: type scale (base 16px) ---------- */ --text-2xs: 0.625rem; /* 10px — logo sub-eyebrow (text-[10px] ×8) */ --text-xs: 0.75rem; /* 12px — text-xs + 12/13px */ --text-sm: 0.875rem; /* 14px — text-sm + text-[14px] */ --text-15: 0.9375rem; /* 15px — form fields (text-[15px] ×78) */ --text-base: 1rem; /* 16px — body (text-base + text-[16px]) */ --text-18: 1.125rem; /* 18px — nav + lead (text-[18px] ×100, text-lg, 19px merged) */ --text-xl: 1.25rem; /* 20px — card titles (text-xl + text-[20px]) */ --text-17: 1.0625rem; /* 17px — added per report #35 (text-[17px] ×6) */ --text-2xl: 1.5rem; /* 24px — h3 (text-2xl + text-[24px]) */ --text-22: 1.375rem; /* 22px — added per report #35 (text-[22px] ×3) */ --text-25: 1.5625rem; /* 25px — responsive section title (text-[25px] ×40) */ --text-3xl: 1.875rem; /* 30px — h2 */ --text-4xl: 2.25rem; /* 36px — h2/h1 base */ --text-52: 3.25rem; /* 52px — display cluster (40/46/50/52px merged) */ --text-56: 3.5rem; /* 56px — NEW (report #3): hero H1, all 8 pages (3.5rem/3.35rem) */ --text-5xl: 3rem; /* 48px — h1 desktop */ --text-7xl: 4.5rem; /* 72px — hero numerals (70px merged) */ --text-8xl: 6rem; /* 96px — hero display (94px merged) */ --text-118: 7.375rem; /* 118px — oversized hero stat (text-[118px] ×10) */ /* ---------- Typography: line-heights ---------- */ --lh-none: 1; --lh-display: 1.07; /* clusters leading-[1.06]/[1.08]/[1.1] */ --lh-tight: 1.25; --lh-snug: 1.375; --lh-relaxed: 1.6; /* clusters leading-relaxed/[1.55]/[1.6] */ /* ---------- Typography: letter-spacing ---------- */ --tracking-tight: -0.02em; /* serif heading tracking cluster */ --tracking-wide: 0.025em;/* buttons */ --tracking-eyebrow-sm: 0.08em; --tracking-eyebrow: 0.12em; --tracking-eyebrow-lg: 0.25em; /* logo sub-label */ /* ---------- Spacing ---------- */ /* Uses the default Tailwind 4px grid (p-/m-/gap-/space-). No custom scale needed. Reference step for CTA padding normalization: */ --space-cta-x: 2rem; /* 32px (px-8) — normalize stray px-[30px] */ --space-cta-y: 0.875rem; /* 14px (py-3.5) — normalize stray py-[13px] */ --header-h: 7rem; /* 112px header height (h-[112px]) */ --container-max: 1300px; /* standard content width (max-w-[1300px] ×23) */ --container-wide: 1440px; /* wide hero/feature blocks (max-w-[1440px] ×20) */ /* ---------- Radii ---------- */ --radius-sm: 0.75rem; /* 12px rounded-xl — inputs */ --radius-md: 14px; /* rounded-[14px] — icon tiles (18px merged) */ --radius-lg: 1rem; /* 16px rounded-2xl — cards (×60) */ --radius-xl: 1.5rem; /* 24px rounded-3xl / rounded-[24px] */ --radius-2xl: 2rem; /* 32px rounded-[2rem]/[28px]/[30px]/[32px] cluster */ --radius-3xl: 2.5rem; /* 40px rounded-[40px] (outlier hero panel) */ --radius-full: 9999px; /* rounded-full — dominant pill/circle (×234) */ /* ---------- Shadows / Elevation ---------- SYSTEM RULE: content surfaces (cards, panels, promo blocks, stat bands) use NO shadow — elevation/definition comes from the warm hairline border (--border) and surface contrast. Shadows are reserved ONLY for transient floating chrome that overlaps page content: --shadow-xl → hover dropdown menus --shadow-2xl → mobile drawer / off-canvas panels The sticky header also gets a light shadow on scroll (added via JS) as an elevation cue. */ --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1); /* floating dropdown menus */ --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25); /* mobile drawer / off-canvas */ /* DEPRECATED (removed from content surfaces — do not reintroduce on cards/panels): --shadow-sm, --shadow, --shadow-md, --shadow-lg, --shadow-brand (brand glow). */ /* ---------- Z-index layers ---------- */ --z-base: 0; /* background media (z-0) */ --z-raised: 5; /* decorative over media (z-[5]) */ --z-content: 10; /* foreground content (z-10) */ --z-overlay: 20; /* overlapping cards/badges (z-20) */ --z-sticky: 30; /* sticky sub-elements (z-30) */ --z-dropdown: 50; /* menus / language dropdown (z-50) */ --z-header-below: 99; /* element under header (z-[99]) */ --z-header: 100; /* fixed site header (z-[100]) */ --z-header-above: 101; /* mobile menu / header overlay (z-[101]) */ /* ---------- Breakpoints (reference; not usable as CSS vars in media queries) ---------- */ --bp-sm: 640px; /* primary responsive step (×513) */ --bp-md: 768px; /* ×137 */ --bp-lg: 1024px; /* ×239 */ --bp-xl: 1280px; /* ×8 */ /* ---------- Component-state helpers ---------- */ --focus-ring: 0 0 0 2px rgba(28,73,66,0.20); /* focus:ring-2 focus:ring-brand/20 */ --transition-base: 300ms; /* duration-300 default */ }