/* VentureStack — Color tokens Light theme dominant: cool near-white paper, neutral near-black ink, one bold signal accent. Philosophy: high-contrast ink-on-paper, a hint cooler than pure white. Use accent sparingly — a highlighter mark, not a flood. */ :root { /* ---- Base palette: cool near-white neutrals (paper → ink) ---- */ --vs-paper: #F4F6F9; /* page background, near-white w/ blue-grey hint */ --vs-paper-2: #FCFDFE; /* raised surface, almost white */ --vs-paper-3: #E9ECF1; /* sunken / hover wash, cool grey */ --vs-ink: #1A1C20; /* primary text, neutral near-black */ --vs-ink-2: #474A52; /* secondary text */ --vs-ink-3: #828791; /* muted / captions */ --vs-line: #1A1C20; /* bold structural lines (match ink) */ --vs-line-soft: #DBDFE6; /* hairline dividers on paper */ /* ---- Signal: vermilion accent (the "highlighter") ---- */ --vs-signal: #EE4E22; /* primary accent / CTAs */ --vs-signal-ink: #C53C16; /* pressed / text-on-paper accent */ --vs-signal-wash: #FBE3D8; /* tinted background */ /* ---- Stack: deep cobalt (structure / secondary) ---- */ --vs-stack: #1E3A5F; /* secondary brand, "the stack" */ --vs-stack-wash: #DEE6EF; /* ---- Semantic ---- */ --vs-validated: #2E7D52; /* success / "validated" */ --vs-validated-wash:#DCEEE2; --vs-caution: #C68A1E; /* warning / "assumption" */ --vs-caution-wash: #F6EAD0; --vs-risk: #C13B2E; /* danger / "risk" */ --vs-risk-wash: #F6DEDB; /* ---- Semantic aliases (use these in components) ---- */ --text-strong: var(--vs-ink); --text-body: var(--vs-ink-2); --text-muted: var(--vs-ink-3); --text-on-accent: #FCFDFE; --surface-page: var(--vs-paper); --surface-card: var(--vs-paper-2); --surface-sunken: var(--vs-paper-3); --border-strong: var(--vs-line); --border-soft: var(--vs-line-soft); --accent: var(--vs-signal); --accent-ink: var(--vs-signal-ink); --accent-wash: var(--vs-signal-wash); --focus-ring: var(--vs-signal); } /* VentureStack — Typography tokens Display: Space Grotesk · Body: Hanken Grotesk · Mono: JetBrains Mono Headlines are tight and confident; body is airy; mono carries metadata. */ :root { /* ---- Families ---- */ --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --font-body: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* ---- Weights ---- */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-black: 800; /* @kind font */ /* ---- Type scale (1.250 major-third-ish, tuned) ---- */ --fs-display: 72px; /* hero / book cover */ --fs-h1: 52px; --fs-h2: 38px; --fs-h3: 28px; --fs-h4: 21px; --fs-lg: 18px; --fs-body: 16px; --fs-sm: 14px; --fs-xs: 12px; --fs-micro: 11px; /* mono labels / eyebrows */ /* ---- Line heights ---- */ --lh-tight: 1.02; /* @kind font */ --lh-snug: 1.15; /* @kind font */ --lh-normal: 1.55; /* @kind font */ --lh-relaxed: 1.7; /* @kind font */ /* ---- Letter spacing ---- */ --ls-tight: -0.02em; /* @kind font */ --ls-normal: 0; /* @kind font */ --ls-wide: 0.04em; /* @kind font */ --ls-label: 0.14em; /* @kind font */ /* ---- Semantic roles ---- */ --text-display: var(--fw-bold) var(--fs-display)/var(--lh-tight) var(--font-display); /* @kind font */ --text-h1: var(--fw-bold) var(--fs-h1)/var(--lh-tight) var(--font-display); /* @kind font */ --text-h2: var(--fw-semibold) var(--fs-h2)/var(--lh-snug) var(--font-display); /* @kind font */ --text-h3: var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-display); /* @kind font */ --text-h4: var(--fw-semibold) var(--fs-h4)/var(--lh-snug) var(--font-display); /* @kind font */ --text-lead: var(--fw-regular) var(--fs-lg)/var(--lh-relaxed) var(--font-body); /* @kind font */ --text-base: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-body); /* @kind font */ --text-label: var(--fw-medium) var(--fs-micro)/1 var(--font-mono); /* @kind font */ } /* VentureStack — Spacing & layout tokens 4px base unit. Generous whitespace is a brand signature — bias to the larger end of the scale for section padding and gaps. */ :root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --space-40: 160px; /* ---- Layout ---- */ --container: 1200px; /* max content width */ --container-narrow: 760px; /* reading column / prose */ --gutter: 24px; /* page side padding */ --section-y: 96px; /* vertical rhythm between sections */ } /* VentureStack — Effects: radii, borders, shadows, motion Signature: bold ink borders + hard offset "print" shadows (no soft blur). Corners are crisp (small radii). Elevation reads like stacked paper. */ :root { /* ---- Radii (crisp, never pill-soft except tags/avatars) ---- */ --radius-0: 0; --radius-sm: 4px; --radius-md: 6px; /* default for cards / inputs / buttons */ --radius-lg: 10px; --radius-pill: 999px; /* ---- Border widths (bold lines are the brand) ---- */ --border-hair: 1px; --border-bold: 1.5px; --border-heavy: 2px; /* ---- Offset shadows (the "stacked paper" motif) ---- Directional offset, lightly blurred + low opacity so they read soft. */ --shadow-stack-sm: 1px 2px 4px 0 rgba(26,28,32,0.10); --shadow-stack: 2px 3px 8px 0 rgba(26,28,32,0.10); --shadow-stack-lg: 3px 5px 14px 0 rgba(26,28,32,0.11); --shadow-stack-accent: 2px 3px 9px 0 rgba(238,78,34,0.16); /* ---- Soft ambient shadows (used sparingly, e.g. overlays/menus) ---- */ --shadow-soft: 0 4px 16px rgba(26,28,32,0.10); --shadow-pop: 0 12px 32px rgba(26,28,32,0.16); /* ---- Motion ---- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-slow: 320ms; /* @kind other */ }