/* * cn-lean design tokens (v0.2.0) * ------------------------------------------------------------------------- * Source of truth: Figma "Cooper Norman Website Design System v1" * file vwkkZUcPZGBV0egBhuRA6D * node 68:2 (Website Mockups v4 — Taxro Template Fidelity) * pulled 2026-07-07 * * Palette is the confirmed V3 Brand Palette Strip (node 77:2). Typography * targets Gotham Light for headlines with Montserrat Light as the live * editable fallback — until Gotham licensing lands, Montserrat is what * actually ships. Body is Open Sans (variable, wdth 100). All three are * loaded from Google Fonts by default; when Gotham + Adobe/Hoefler is * wired up, override --font-serif here without touching main.css. */ :root { /* ============================================================ * Palette — V3 (Figma node 77:2) * ============================================================ */ --color-deep-ink: #05151B; /* primary dark / footer bg / primary text on light */ --color-near-black: #212121; /* pure neutral dark alt */ /* Deepened 2026-07-16 from #51534A (6.94:1 on parchment, sub-AAA) to * 8.36:1 — same warm undertone, comfortably readable. */ --color-warm-gray: #454740; /* body text / editorial gray */ --color-muted-gray: #919388; /* tertiary text / de-emphasized */ --color-concrete: #D7D2CB; /* hairline borders / dividers / muted band */ --color-page: #FAFAFA; /* page background */ --color-orange-cta: #FFA300; /* accent / CTA color (buttons, dark grounds) */ --color-orange-text: #9A5800; /* WCAG AA orange for small text on light grounds (5.4:1 on parchment) */ --color-muted-text: #65675D; /* WCAG AA muted gray for small TEXT on light grounds (>=4.5:1 incl form parchment); keep #919388 for decorative only */ --color-emphasis: #51534A; /* serif-italic heading emphasis (6.94:1 on parchment) */ --color-warm-copper: #D7A86E; /* secondary warm accent */ --color-parchment: #F4F1EB; /* warm-cream surface / hero bg */ /* Semantic aliases — always resolve to a named palette color above. Component CSS should USE these, not the raw palette names. */ --color-ink: var(--color-deep-ink); --color-ink-soft: var(--color-warm-gray); --color-ink-muted: var(--color-muted-gray); --color-line: var(--color-concrete); /* Fine internal hairline. Concrete (#D7D2CB) is a surface-weight tone and * reads as a heavy border at 1px; this is its lighter sibling, the warm * equivalent of the reference layout's #DEE1E7 rule. */ --color-hairline: #E6E2DB; --color-surface: var(--color-page); --color-surface-alt: var(--color-parchment); --color-surface-invert: var(--color-deep-ink); --color-on-invert: #E9ECEF; --color-primary: var(--color-deep-ink); /* headline / brand mark */ --color-primary-hover: #000A0F; --color-secondary: var(--color-warm-gray); --color-accent: var(--color-orange-cta); --color-accent-hover: #E68F00; --color-accent-2: var(--color-warm-copper); --color-success: #1F7A4D; --color-warning: #A15C00; --color-danger: #A4262C; --color-focus: var(--color-orange-cta); /* ============================================================ * Typography * Target: Gotham Light headlines / Open Sans body (per Figma "TYPE UPDATE"). * Fallback until Gotham licensed: Montserrat Light. * Eyebrows: Montserrat SemiBold, tracking 4.2px, orange (see .cn-eyebrow token). * ============================================================ */ --font-display: 'Gotham', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Public Sans (Libre Franklin lineage): editorial gothic body — warmer and * more distinctive than Open Sans, on-message for a public-trust CPA brand. */ --font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Very Vogue (self-hosted): high-contrast editorial serif for secondary * sub-headlines/taglines + quotes — the fashion-editorial accent against * the tracked sans display. Display cut for taglines, Text cut for quotes. */ --font-accent: 'Very Vogue Display', Georgia, 'Times New Roman', serif; --font-accent-text: 'Very Vogue Text', Georgia, 'Times New Roman', serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* --font-serif kept as an alias for legacy templates; points at display. */ --font-serif: var(--font-display); /* Fluid type scale. Display sizes align to Figma's 54/40/30/24/22 headline steps and 22/18/15/13 body steps. Base = 16px. */ --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.813rem); --fs-sm: clamp(0.813rem, 0.79rem + 0.15vw, 0.875rem); --fs-base: clamp(0.938rem, 0.91rem + 0.15vw, 1rem); /* body 15–16px */ --fs-md: clamp(1.125rem, 1.09rem + 0.2vw, 1.25rem); /* lede 18–20px */ --fs-lg: clamp(1.25rem, 1.19rem + 0.3vw, 1.375rem); /* pull quote / intro paragraph */ --fs-xl: clamp(1.375rem, 1.3rem + 0.4vw, 1.5rem); /* h4 22–24 */ --fs-2xl: clamp(1.75rem, 1.6rem + 0.7vw, 2rem); /* h3 28–32 */ --fs-3xl: clamp(2.25rem, 2rem + 1.1vw, 2.75rem); /* h2 36–44 */ --fs-4xl: clamp(2.75rem, 2.4rem + 1.8vw, 3.75rem); /* h1 44–60 */ --fs-display: clamp(3rem, 2.5rem + 2.5vw, 4.5rem); /* hero display 48–72 */ --lh-tight: 1.05; /* display headlines: Figma leading 62 on 54 ≈ 1.15; used 1.05 to allow browser leading buffer */ --lh-snug: 1.15; /* headline body */ --lh-normal: 1.55; /* body text */ --lh-loose: 1.7; /* prose */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Figma "no tracking on long headlines" — display defaults to normal. Eyebrows keep the tracked 4.2px feel via --tracking-eyebrow. */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.22em; /* brand ref: CONQUERING UNCERTAINTY tracking */ --tracking-caps: 0.08em; /* ============================================================ * Spacing — Figma frames use 72px gutter, 96px vertical section rhythm. * ============================================================ */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 — Figma section rhythm */ --space-10: 8rem; /* 128 */ --space-11: 10rem; /* 160 */ /* Layout — Figma comp v4 (authoritative): 1440 canvas, 72px gutters → 1296 CONTENT. * container-max includes the gutter padding, so content = 1440 − 2×72 = 1296 * and section content aligns at x=72 on the 1440 canvas (not double-inset). */ --container-max: 1440px; --container-narrow: 820px; --container-wide: 1440px; --container-gutter: clamp(1.25rem, 5vw, 4.5rem); --bp-sm: 40em; /* 640 */ --bp-md: 48em; /* 768 */ --bp-lg: 64em; /* 1024 */ --bp-xl: 80em; /* 1280 */ --bp-2xl: 90em; /* 1440 canvas */ /* Radii — Taxro uses square-ish forms; CTA is a pill. Cards rounded 0. */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 22px; --radius-pill: 999px; /* Elevation kept subtle — editorial layout prefers borders over shadow. */ --shadow-1: 0 1px 2px rgba(5,21,27,.04), 0 1px 1px rgba(5,21,27,.03); --shadow-2: 0 4px 10px rgba(5,21,27,.05), 0 2px 4px rgba(5,21,27,.03); --shadow-3: 0 16px 32px rgba(5,21,27,.08), 0 6px 12px rgba(5,21,27,.04); --shadow-focus: 0 0 0 3px rgba(255,163,0,.35); --ease-out: cubic-bezier(.22,.61,.36,1); --ease-in-out: cubic-bezier(.4,0,.2,1); --dur-fast: 120ms; --dur-base: 260ms; --dur-slow: 520ms; --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-nav: 500; --z-modal: 1000; --z-toast: 2000; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } } /* ============================================================ * Parent-token bridge — vgs-base base.css :root vars remapped to * the CN palette so `vgs-ground-*` utilities and any parent-canon * renderer inherit the brand instead of the neutral beige defaults. * ============================================================ */ :root { --color-bg-page: var(--color-page); --color-bg-surface: #FFFFFF; --color-bg-subtle: var(--color-parchment); --color-bg-inverse: var(--color-deep-ink); --color-brand-primary: var(--color-deep-ink); --color-brand-primary-hover: #000A0F; --color-brand-accent: var(--color-orange-cta); --color-text-primary: var(--color-deep-ink); --color-text-secondary: var(--color-warm-gray); --color-text-inverse: var(--color-on-invert); --color-text-inverse-secondary: rgba(233, 236, 239, 0.72); --color-border-default: var(--color-concrete); --color-border-strong: var(--color-muted-gray); --font-body: var(--font-sans); }