/* * Flagship — unified design tokens (v2: dark-canvas + teal). * * One palette across every public surface. Dark canvas, warm cream type, * teal accent. Sober technical-document aesthetic. * * Legacy variable names from v1 (--bg, --fg, --accent, --primary, …) are * preserved as aliases at the bottom so pages that haven't migrated keep * working with the new look. */ @font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/Geist-Variable.woff2") format("woff2-variations"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/GeistMono-Variable.woff2") format("woff2-variations"); } :root { /* ── Surfaces ────────────────────────────────────────────────── */ --canvas: #F7F6F2; --canvas-2: #F0EEE8; --surface: #FFFFFF; --surface-elev: #FFFFFF; --surface-sunken: #EFEDE7; /* ── Ink ─────────────────────────────────────────────────────── */ /* Warm near-black, NOT pure #000 (design-system §2: pure #000/#FFF are * banned — they look cheap on OLED + paper-white). This is the §2.1 * light-theme `--text` value, kept on the warm-neutral axis. The teal * accent (--teal / --accent / --primary, below) is the ONLY saturated * hue used for CTAs / links / focus — never --ink. */ --ink: #14140F; --ink-soft: #1F1E1A; --ink-muted: #555149; --ink-faint: #8A8478; /* ── Rules / borders ─────────────────────────────────────────── */ --rule: #E5E3DC; --rule-strong: #C8C5BB; --border: #E5E3DC; --border-soft: #EFEDE6; /* ── Teal accent ─────────────────────────────────────────────── */ --teal: #14B8A6; --teal-bright: #2DD4BF; --teal-deep: #0F8B7E; --teal-soft: rgba(20,184,166,0.10); --teal-glow: rgba(45,212,191,0.18); /* Ink that sits on a --teal fill (7.96:1 on #14B8A6), in both themes. */ --on-teal: #0A0A09; /* ── Status ──────────────────────────────────────────────────── */ /* Status text is deep on paper (4.5:1 on every light surface and its own * wash); the dark block below restores the bright steps. */ --ok: #166534; --warn: #944D05; --err: #B91C1C; --ok-soft: rgba(22,101,52,0.08); --warn-soft: rgba(148,77,5,0.08); --err-soft: rgba(185,28,28,0.06); /* ── Type ────────────────────────────────────────────────────── */ --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-display: var(--font-sans); --font-heading: var(--font-sans); --font-body: var(--font-sans); /* Fluid type scale */ --display-size: clamp(40px, 6vw, 68px); --display-line: 1.04; --display-track: -0.026em; --h1-size: clamp(30px, 4.8vw, 52px); --h1-line: 1.05; --h1-track: -0.026em; --h2-size: clamp(22px, 2.8vw, 30px); --h2-line: 1.14; --h2-track: -0.018em; --h3-size: 18px; --h3-line: 26px; --h4-size: 16px; --h4-line: 24px; --body-size: 15.5px; --body-line: 1.55; --body-sm-size: 14px; --body-sm-line: 1.55; --caption-size: 12px; --caption-line: 1.55; --mono-size: 13px; --mono-line: 1.55; --eyebrow-size: 11px; --eyebrow-line: 1.4; --eyebrow-track: 0.18em; /* ── Spacing — 4px grid ──────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ── Radii ───────────────────────────────────────────────────── */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 18px; --radius-pill:999px; /* ── Shadows — light-canvas variant ──────────────────────────── */ --shadow-flat: 0 1px 0 rgba(0,0,0,0.04); --shadow-resting: 0 1px 2px rgba(0,0,0,0.04), 0 6px 18px rgba(0,0,0,0.06); --shadow-lift: 0 2px 6px rgba(0,0,0,0.06), 0 14px 36px rgba(0,0,0,0.08); --shadow-modal: 0 24px 64px rgba(0,0,0,0.14); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6); /* ── Layout ──────────────────────────────────────────────────── */ --content-width: 1180px; --reading-width: 60ch; --gutter: clamp(20px, 4vw, 56px); --nav-h: 60px; /* ── Motion ──────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.32, 0.72, 0, 1.4); --ease-flat: cubic-bezier(0.4, 0, 0.2, 1); --motion-state: 160ms var(--ease-out); --motion-layout: 320ms var(--ease-out); --motion-reveal: 600ms var(--ease-out); color-scheme: light; /* ── Legacy aliases (v1 → v2) ────────────────────────────────── */ --bg: var(--canvas); --bg-elev: var(--surface); --bg-elev-2: var(--surface-elev); --fg: var(--ink); --fg-mute: var(--ink-muted); --line: var(--rule-strong); /* The brand teal is #14B8A6 and the look is light teal (owner, * 2026-10-17). --teal fills and carries --on-teal ink. --accent-graphic is * the same teal for icons beside labels, markers, focus, state borders and * large headings (2.3:1 on paper: never the only cue for an unlabelled * control). --accent is the deep step for inline text links ONLY (4.5:1); * other teal text is ink, semibold, with a teal marker or underline. * apps/web/tests/themeContrast.test.ts pins the pairings. */ --accent: #0F766E; --accent-graphic: #14B8A6; --accent-bright: var(--teal-bright); --accent-press: #0B5F58; --accent-deep: var(--teal-deep); --accent-soft: var(--teal-soft); --accent-on: var(--on-teal); /* Inner ring of every focus indicator (3:1 on any surface). */ --focus-inner: var(--ink); --primary: var(--teal); --primary-hover: var(--teal-bright); --success: var(--ok); --warning: var(--warn); --danger: var(--err); --text: var(--ink); --text-muted: var(--ink-muted); --radius: var(--radius-md); --canvas-tinted: var(--canvas-2); /* Text-tone aliases (consumed by index/coming-soon + legacy chrome) */ --muted: var(--ink-muted); --faint: var(--ink-faint); /* ── Brand logo ──────────────────────────────────────────────── */ /* Square / ring / core. Only the outer square swaps between themes. */ --lg-frame: #0A0A09; --lg-ring: #FFFFFF; --lg-core: var(--teal); } :root[data-theme="dark"] { /* ── Surfaces ────────────────────────────────────────────────── */ --canvas: #0A0A09; --canvas-2: #14130F; --surface: #1A1916; --surface-elev: #232118; --surface-sunken: #14130F; /* ── Ink ─────────────────────────────────────────────────────── */ --ink: #ECE7D6; --ink-soft: #C8C2B0; --ink-muted: #8A8478; --ink-faint: #565249; /* ── Rules / borders ─────────────────────────────────────────── */ --rule: #25231C; --rule-strong: #3A372F; --border: #25231C; --border-soft: #1F1D17; /* ── Shadows — kept subtle on dark canvas ────────────────────── */ --shadow-flat: 0 1px 0 rgba(0,0,0,0.6); --shadow-resting: 0 2px 6px rgba(0,0,0,0.35), 0 10px 28px rgba(0,0,0,0.45); --shadow-lift: 0 4px 12px rgba(0,0,0,0.4), 0 18px 48px rgba(0,0,0,0.55); --shadow-modal: 0 30px 80px rgba(0,0,0,0.6); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04); color-scheme: dark; /* Teal text and graphics are the bright step on the dark canvas. */ --accent: #2DD4BF; --accent-graphic: #2DD4BF; --accent-press: #5EEAD4; --ok: #4ADE80; --warn: #FBBF24; --err: #F87171; --ok-soft: rgba(74,222,128,0.10); --warn-soft: rgba(251,191,36,0.10); --err-soft: rgba(248,113,113,0.10); /* Brand logo — outer square flips to white on the dark canvas */ --lg-frame: #FFFFFF; --lg-ring: #FFFFFF; --lg-core: var(--teal); } @media (prefers-reduced-motion: reduce) { :root { --motion-state: 0.01ms linear; --motion-layout: 0.01ms linear; --motion-reveal: 0.01ms linear; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }