/* ========================================================================== VVP MONO / tokens.css Parallel design system scoped to the website (v3 content pass). It does NOT replace the firm's primary VVP system (blue / orange), which stays intact for other collateral. Variants (set data-variant on ): "chalk" (a) chalk flat - default "white" (b) white flat, same ink and gray "blue" (c) white base + the v2 draft's royal blue and ink-navy (added 7/22 at Brad's request, matching Matt's scheme) "chalk-grain" chalk with grain - texture layer lives in texture.css ========================================================================== */ :root { /* ---- color: ink + exactly one medium gray + off-white base family ---- */ --mono-ink: #1A1915; /* text and structure */ --mono-gray: #6F6A5F; /* the one medium gray (secondary text) */ --mono-base: #FAF7F2; /* chalk page base */ --mono-surface: #FFFDF8; /* card fill, chalk family */ --mono-base-deep: #EFEAE0; /* placeholder fields, chalk family */ --mono-line: rgba(26, 25, 21, 0.16); /* hairline: ink at 16 percent */ --mono-line-strong: var(--mono-ink); /* structural rules */ --mono-accent: var(--mono-ink); /* accent hook: ink by default; a variant may repoint it */ /* aliases consumed by inline styles in the locked v3 HTML */ --text-dim: var(--mono-gray); --accent: var(--mono-ink); /* ---- type ---- */ --font-display: 'Funnel Display', 'Manrope', sans-serif; --font-body: 'Manrope', sans-serif; --font-mono: 'JetBrains Mono', monospace; --font-serif: 'Instrument Serif', serif; /* italic accent only, never body */ /* scale: composed, not shouty. Home hero H1 sits below interior page titles. */ --fs-hero: clamp(34px, 3.8vw, 50px); /* Home H1 (full sentence) */ --fs-page-title: clamp(42px, 5vw, 60px); /* one-word interior H1s */ --fs-title: clamp(26px, 3vw, 34px); /* section-title */ --fs-group-title: 27px; /* faq-group-title */ --fs-card-title: 20px; --fs-body-lg: 18.5px; --fs-body: 16.5px; --fs-body-sm: 15px; --fs-caption: 13.5px; --fs-eyebrow: 12px; --fs-label: 10.5px; --lh-tight: 1.12; --lh-heading: 1.3; --lh-body: 1.65; --lh-loose: 1.75; --track-display: -0.01em; --track-caps: 0.18em; --track-label: 0.13em; /* ---- spacing: 4px grid ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; --sp-32: 128px; /* ---- shape and motion ---- */ --radius: 0px; /* squared system */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur: 200ms; /* ---- texture hooks (values supplied by texture.css) ---- */ --texture-image: none; --texture-mask: var(--mono-base); } /* (b) chalk grain: same chalk palette; texture.css activates the layer */ html[data-variant="chalk-grain"] { /* palette identical to chalk */ } /* (b) white flat: clean near-white base, same ink and gray */ html[data-variant="white"] { --mono-base: #FFFFFF; --mono-surface: #FBFAF7; --mono-base-deep: #F0EEE8; } /* (c) blue: white base with the v2 draft's palette (Matt's scheme). Ink shifts to the v2 ink-navy, the one gray to the v2 dim slate, and the accent hook repoints from ink to the v2 royal blue. Same type, same spacing, same rules; color only. */ html[data-variant="blue"] { --mono-ink: #141722; --mono-gray: #4B5164; --mono-base: #FFFFFF; --mono-surface: #F7F8FB; --mono-base-deep: #EDF0F6; --mono-line: rgba(20, 23, 34, 0.16); --mono-accent: #1B2DD5; --accent: #1B2DD5; } /* (d) chalk + blue: the chalk base and warm inks unchanged, with the v2 royal blue as accent only (buttons, links, eyebrow ticks, accent words). Added 7/27 at Brad's request; one of the two finalists with "blue". */ html[data-variant="chalk-blue"] { --mono-accent: #1B2DD5; --accent: #1B2DD5; }