/* ============================================================ HumanDeploy — Design Tokens The single source of truth for color, type, space, motion. Light is default. data-theme="dark" swaps the palette. Canonical values: design-system/identity/palette.html design-system/identity/typography.html Updated: April 14, 2026 ONLY style source for all pages. If you need v4-shared.css, something is wrong. ============================================================ */ /* ── RESET ────────────────────────────────────────────────── Minimal global reset. Every page that loads tokens.css gets sane defaults without needing v4-shared.css or a third file. ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } img { max-width: 100%; display: block; } :root { /* Color — surfaces (from palette page) */ --paper: #F5EFE4; /* page background — warm cream */ --paper-2: #EDE5D5; /* alternating section bg — slightly warmer */ --bone: #EBE1D0; /* cards, frames, stages */ --dune: #D9C4A3; /* heritage surfaces, longform, print */ --hairline-2: rgba(20, 17, 15, 0.12); /* stronger divider */ --paper-soft: #EDE8DC; /* sunken sections */ --surface: #FDFAF5; /* raised cards */ --surface-soft: #F5F1E8; /* ambient sidebar / panel */ /* Color — ink (from palette page) */ --ink: #14110F; /* body text, headlines, the primary voice */ --ink-soft: #3A332E; /* secondary body, captions, quieter text */ --ink-quiet: #867A70; /* labels, metadata, stamps — AA on all surfaces */ --ink-faint: #B8AFA6; /* disabled, placeholders — non-text role */ /* Color — brand (from palette page) */ --coral: #E86A4E; /* the human — the one pixel that survives every deployment */ --ember: #A85A40; /* pressed state, hover depth — coral with the heat turned up */ --coral-soft: #EFA48F; --coral-wash: rgba(232, 106, 78, 0.08); --coral-glow: rgba(232, 106, 78, 0.18); /* Color — specialist (from palette page) */ --slate: #8FA0B0; /* Chief of Staff, operations — the cool organizing mind */ --sage: #A5B093; /* GTM, growth — anything that compounds over time */ --terra: #D9A98A; /* brand, craft — the hand that made it */ /* Color — semantic The base values are tuned for badges, borders, icons (non-text usage). The -text variants are tuned for body text on light surfaces and pass WCAG AA at small text sizes. */ --ok: #4F8A6E; --warn: #C28B3E; --error: #B7503D; --info: #5C7AA8; --ok-text: #2F6A50; --warn-text: #8B5E1F; --error-text: #963F2F; --info-text: #3C5C8C; /* Hairlines (derived from --ink #14110F = rgb(20, 17, 15)) */ --hairline: rgba(20, 17, 15, 0.10); --hairline-strong: rgba(20, 17, 15, 0.18); /* Shadow system — Linear-quiet. Surfaces lean on hairlines + paper contrast for definition, not elevation. Shadows are single-pass hints, not depth drama. --shadow-soft — cards at rest, frames, product visuals (nearly flat) --shadow-lift — hover states, elevated cards (slightly more present) --shadow-popover — floating menus/tooltips (actually floating) --shadow-coral* — accent shadow only, reserved for the one coral element per view when it needs to read as lifted */ --shadow-soft: 0 1px 2px rgba(20, 17, 15, 0.04); --shadow-lift: 0 1px 2px rgba(20, 17, 15, 0.04), 0 4px 8px -2px rgba(20, 17, 15, 0.06); --shadow-coral: 0 4px 10px -2px rgba(232, 106, 78, 0.35); --shadow-coral-lift: 0 0 0 4px rgba(232, 106, 78, 0.12), 0 6px 14px -2px rgba(232, 106, 78, 0.45); /* Type families */ --serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* Type scale — body sans */ --fs-xs: 11px; --fs-sm: 12.5px; --fs-base: 14px; --fs-md: 15.5px; --fs-lg: 17px; /* Type scale — serif display (set with opsz) */ --fs-display-sm: 1.5rem; /* 24px @ opsz 24 */ --fs-display-md: 2rem; /* 32px @ opsz 32 */ --fs-display-lg: 2.6rem; /* 41.6px @ opsz 48 */ --fs-display-xl: 3.5rem; /* 56px @ opsz 60 */ /* Type scale — mono labels */ --fs-label: 10.5px; --fs-mono-sm: 11px; --fs-mono-md: 12px; /* Spacing — 4px base */ --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; /* Layout */ --container: 1200px; --gutter: 48px; --gutter-mobile: 20px; /* Breakpoints — the only two thresholds the site ships against. --bp-sm 640px — phone (iPhone 13 Pro Max is 428; iPad Mini portrait is 768). --bp-md 880px — tablet / narrow laptop. Above this, multi-col grids open up. CSS doesn't read custom properties inside @media queries; these tokens are the *contract*. Always write `@media (max-width: 640px)` / `(max-width: 880px)` to honor it. No pages should ship 420 / 540 / 600 / 720 / 820 / 960 / 1100. */ --bp-sm: 640px; --bp-md: 880px; /* Touch — minimum tap target for any interactive surface. Drives min-height on buttons, nav links, drawer rows. */ --touch: 44px; /* Radii — semantic scale The semantic tokens (--r-btn, --r-card, --r-frame) are the ones to reach for. The raw scale stays as a fallback for edge cases but shouldn't be used for surface-level decisions. */ --r-xs: 4px; /* inputs, tiny chips, small dot-backgrounds */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 14px; --r-2xl: 18px; /* legacy — prefer --r-frame */ --r-pill: 999px; --r-full: 50%; /* Semantic radii — use these first */ --r-btn: var(--r-md); /* 8px — all buttons */ --r-card: var(--r-lg); /* 12px — all cards, pillar visuals, specialist cards */ --r-frame: var(--r-xl); /* 14px — large product frames: hero demo, features, seam */ /* Motion */ --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-emphasized: cubic-bezier(0.25, 0.1, 0.25, 1.4); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-long: 560ms; --dur-breathe: 4000ms; --dur-cursor: 900ms; /* Letter spacing */ --tracking-tight: -0.02em; /* display headlines */ --tracking-snug: -0.01em; /* large headings */ --tracking-normal: -0.005em; /* body serif and ui */ --tracking-wide: 0.04em; /* mono small */ --tracking-wider: 0.06em; /* mono labels */ --tracking-widest: 0.12em; /* eyebrows / caps */ /* Line heights */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.6; /* Effects */ --focus-ring: 0 0 0 3px var(--coral-wash); --focus-ring-strong: 0 0 0 3px var(--coral-glow); --blur-bg: blur(20px) saturate(140%); --selection-bg: var(--coral-wash); --selection-fg: var(--ink); --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* Z-index */ --z-base: 1; --z-raised: 10; --z-overlay: 100; --z-modal: 1000; --z-toast: 2000; /* Scrim — modal/dialog backdrop */ --scrim: rgba(20, 17, 15, 0.36); --scrim-strong: rgba(20, 17, 15, 0.56); /* Popover shadow — menus, tooltips, suggest-edit popover. Actually floating above the page, so slightly more present than cards — but still restrained. Linear-quiet. */ --shadow-popover: 0 2px 4px rgba(20, 17, 15, 0.06), 0 8px 16px -4px rgba(20, 17, 15, 0.10); /* Layout */ --sidebar-w: 240px; --panel-w: 280px; --topbar-h: 52px; --read-width: 720px; } /* Body defaults — uses tokens defined above */ body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } [data-theme="dark"] { /* Surfaces — derived from light palette, shifted warm-dark */ --paper: #14110F; --paper-2: #12100D; --bone: #100E0B; --dune: #1A1714; --paper-soft: #16130F; --surface: #1E1B17; --surface-soft: #1A1714; --scrim: rgba(0, 0, 0, 0.62); --scrim-strong: rgba(0, 0, 0, 0.78); --shadow-popover: 0 2px 4px rgba(0, 0, 0, 0.30), 0 8px 16px -4px rgba(0, 0, 0, 0.44); /* Ink — light paper values become dark-mode text */ --ink: #F5EFE4; --ink-soft: #C4BBB0; --ink-quiet: #8A8079; --ink-faint: #5C534E; /* Brand — coral warms slightly for dark backgrounds */ --coral: #EE8E78; --ember: #C47058; --coral-soft: #F2A892; --coral-wash: rgba(238, 142, 120, 0.10); --coral-glow: rgba(238, 142, 120, 0.22); /* Specialist — slightly lighter for dark mode legibility */ --slate: #A0B0BE; --sage: #B5C0A3; --terra: #E0B99A; /* Hairlines — derived from dark-mode ink (#F5EFE4) */ --hairline: rgba(245, 239, 228, 0.08); --hairline-strong: rgba(245, 239, 228, 0.16); /* Semantic — AA-text variants for dark mode */ --ok-text: #7DBA9D; --warn-text: #E0AC68; --error-text: #E5806A; --info-text: #95B0D6; --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.24); --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.24), 0 4px 8px -2px rgba(0, 0, 0, 0.32); } /* ── SYSTEM DARK MODE ───────────────────────────────────── Mirrors [data-theme="dark"] for users whose OS prefers dark. :not([data-theme="light"]) ensures an explicit light toggle wins. ─────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Surfaces */ --paper: #14110F; --paper-2: #12100D; --bone: #100E0B; --dune: #1A1714; --paper-soft: #16130F; --surface: #1E1B17; --surface-soft: #1A1714; --scrim: rgba(0, 0, 0, 0.62); --scrim-strong: rgba(0, 0, 0, 0.78); --shadow-popover: 0 2px 4px rgba(0, 0, 0, 0.30), 0 8px 16px -4px rgba(0, 0, 0, 0.44); /* Ink */ --ink: #F5EFE4; --ink-soft: #C4BBB0; --ink-quiet: #8A8079; --ink-faint: #5C534E; /* Brand */ --coral: #EE8E78; --ember: #C47058; --coral-soft: #F2A892; --coral-wash: rgba(238, 142, 120, 0.10); --coral-glow: rgba(238, 142, 120, 0.22); /* Specialist */ --slate: #A0B0BE; --sage: #B5C0A3; --terra: #E0B99A; /* Hairlines */ --hairline: rgba(245, 239, 228, 0.08); --hairline-strong: rgba(245, 239, 228, 0.16); /* Semantic */ --ok-text: #7DBA9D; --warn-text: #E0AC68; --error-text: #E5806A; --info-text: #95B0D6; --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.24); --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.24), 0 4px 8px -2px rgba(0, 0, 0, 0.32); } } @keyframes breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: 0.85; } } @keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @keyframes cursor-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @keyframes thinking-pulse { 0%, 100% { opacity: 0.4; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } } /* v0.4 — long-run, streaming edges, confidence shimmer */ @keyframes progress-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } } @keyframes row-build { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } } @keyframes line-build { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } } @keyframes uncertain-flicker { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } /* v0.5 — modal rise, toast slide, popover pop */ @keyframes modal-rise { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } } @keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes popover-pop { from { opacity: 0; transform: translateY(-2px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ============================================================ Global elements — selection, scrollbar, focus ============================================================ */ ::selection { background: var(--selection-bg); color: var(--selection-fg); } * { scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--ink-quiet); background-clip: content-box; border: 2px solid transparent; } :focus { outline: none; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }