/* ============================================================ ALTDATA design tokens — Phase R1-2. Source: docs/Website_Revamp_Refined_Plan.md §7 + brand guidelines. Non-negotiable rules: - Lime is NEVER text or thin lines on light backgrounds (1.75:1 on white). Lime = large fills, icons, diagram highlights, and hover fills carrying ink text (6.88:1). - Secondary/accent colours are functional only (tag chips, diagrams, charts). Page chrome stays grey + lime + white. Every colour pair used by components is verified by `npm run check:contrast` (scripts/contrast-check.js). ============================================================ */ :root { /* ---- primary palette ---- PDF names (ALTDATA_GUIDELINES_2026 p.1): "Dark Grey" = Pantone Cool Grey 11C, "Lime Green" = Pantone 375C, plus White. RGB breakdowns match exactly; web tokens use our shorthand names. */ --c-ink: #32373C; /* PDF "Dark Grey" — text, footer, buttons 12.0:1 on white */ --c-ink-muted: #545B61; /* secondary text (web-derived, not in PDF) 6.9:1 on white */ --c-lime: #96D700; /* PDF "Lime Green" — accent; see rules above */ --c-white: #FFFFFF; --c-band: #F5F6F7; /* alternating section bands (web-only extension) */ --c-grey-500: #808080; /* PDF "Mid Grey" — UI borders; large text only (4.0:1) */ --c-grey-300: #CDCDCD; /* PDF "Light Grey" — decorative hairlines only */ /* ---- functional accents (chips / diagrams / charts ONLY) ---- = the PDF's "secondary colours", exact RGB match. */ --c-accent-orange: #F08F00; --c-accent-pink: #EA1475; --c-accent-blue: #1E6EB7; --c-accent-green: #4C8C33; /* PDF "Dark Green" */ --c-accent-red: #B10047; /* ---- semantic aliases (intent only — no new colour values) ---- */ --c-error: var(--c-accent-red); /* form errors (7.1:1 on white) */ --c-success: var(--c-accent-green); /* success banners */ /* Structural marker = the kicker dot. Adopted from the designer's Figma (Variant 02): brand pink, corrected from their #EA1474 eyedropper slip. DECORATIVE FILL ONLY — pink as *text* fails AA (4.33:1 on white, 4.00:1 on band); scripts/contrast-check.js pins that as a must-fail. */ --c-marker: var(--c-accent-pink); /* Interaction reward = the button hover fill. Moved lime → pink in the designer's round 2 (2026-07-31), with a WHITE label per the client. Brand pink shaded 5% (#EA1475 → #DE136F) so white clears AA at 4.74:1 — plain brand pink gives only 4.33:1 and would fail. A derived value, exactly like the 12% chip tints; --c-accent-pink is unchanged. Don't "simplify" this back to var(--c-accent-pink): the suite fails. */ --c-reward: #DE136F; /* ---- 12% tints — chip backgrounds; ink text ≥9.6:1 on all ---- */ --c-tint-lime: #F2FAE0; --c-tint-orange: #FDF2E0; --c-tint-pink: #FCE3EE; --c-tint-blue: #E4EEF6; --c-tint-green: #EAF1E7; --c-tint-red: #F6E0E9; --c-tint-neutral: #EFEFEF; /* ---- hairlines (decorative/structural lines, never text) ---- */ --line-soft: rgb(50 55 60 / 0.10); /* on light backgrounds */ --line-soft-dark: rgb(255 255 255 / 0.22); /* on ink bands */ /* ---- typography ---- Heading face: Nata Sans (OFL, Daniel Uzquiano), self-hosted variable woff2, latin subset, wght 200–900. Adopted from the designer's Figma (Variant 02, 2026-07-11); replaced Sora. Body stays the system stack — the design's 16px/1.6 body spec renders identically without a download (its Inter was a Figma default, not a considered choice). */ --font-heading: "Nata Sans", system-ui, sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* the "data voice" — system monospace for factual metadata only (captions, metas, spec values, legal). Never headings/body/nav. */ --font-data: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", "Menlo", monospace; /* Scale per the Figma: hero 64px/800, section h2 48px/800, CTA h2 38px, case title 32px, flagship title 24px, ledger/card title 20px. */ --fs-950: clamp(2.5rem, 5vw + 1rem, 4rem); /* hero h1 → 64px */ --fs-900: clamp(2.25rem, 4.5vw + 1rem, 3.25rem); /* h1 (interior) */ --fs-800: clamp(2rem, 3vw + 1rem, 3rem); /* h2 → 48px */ --fs-750: clamp(1.75rem, 2.5vw + 0.75rem, 2.375rem);/* CTA h2 → 38px */ --fs-700: 2rem; /* case title 32px */ --fs-650: 1.5rem; /* h3 → 24px */ --fs-600: 1.25rem; /* h4 / card 20px */ --fs-500: 1.125rem; /* lead paragraph */ --fs-400: 1rem; /* body */ --fs-300: 0.875rem; /* small / meta */ --fs-200: 0.75rem; /* chip / legal */ --lh-tight: 1.08; --lh-body: 1.6; --measure: 65ch; /* uppercase UI tracking, straight from the Figma */ --ls-nav: 0.05em; /* nav 14px/700 (0.7px) */ --ls-button: 0.1em; /* button 14px/600 (1.4px) */ --ls-kicker: 0.06em; /* kicker 16px/700 */ /* ---- spacing (4px base) ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; /* ---- radii (4/8/16px + pill — softened per the Figma) ---- */ --r-sm: 0.25rem; /* buttons, inputs, chips-as-tags */ --r-md: 0.5rem; /* cards, flagship panels */ --r-lg: 1rem; /* large panels, media frames */ --r-pill: 999px; /* ---- elevation (flat by default; depth is a hover reward) ---- */ --shadow-card: 0 1px 2px rgb(50 55 60 / 0.05); --shadow-card-hover: 0 2px 4px rgb(50 55 60 / 0.07), 0 8px 20px rgb(50 55 60 / 0.10); /* ---- motion (hover states + fade-ins only) ---- */ --dur-fast: 150ms; --dur-slow: 300ms; /* Load-entrance fade. Amplified from --dur-slow/8px on the client's decision 2026-08-01: the old WordPress site scroll-animated text via AOS, and the 300ms/8px entrance read as no motion at all next to that memory. Fade-only is still the vocabulary; this is visibility, not choreography. */ --dur-entrance: 550ms; --ease: cubic-bezier(0.2, 0.6, 0.3, 1); /* ---- layout ---- */ --container: 72rem; --band-pad: clamp(3rem, 8vw, 5rem); }