/* ═══════════════════════════════════════════════════════════════════════════ LogVoice design tokens — Option 03 "Quiet Confidence" Single source of truth for the marketing site. Mirrors mobile/src/constants/colors.ts — when you change a value here, change it there too, and vice versa. Full spec and measured contrast ratios: design/option-3-quiet-confidence.html Two rules worth knowing before editing: 1. Teal is BOTH the brand color and the success color, on purpose. Never use --primary to mark a neutral or a warning; that association is the palette's whole idea. 2. --border is a warm hairline for GROUPING only (below 3:1). Anything interactive — inputs, buttons, focus outlines — uses --border-strong, measured at 3.44:1 light / 3.32:1 dark (WCAG 1.4.11). ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Paper & ink ─────────────────────────────────────────────────────── */ --bg: #fbf9f6; /* warm paper */ --bg-deep: #f3efe8; /* recessed bands, footer */ --surface: #ffffff; --card: #ffffff; --card-hi: #f3efe8; --border: #e6dfd4; --border-strong: #8f857a; /* 3.44:1 — interactive boundaries */ --text: #1a1815; /* 16.86:1 */ --muted: #6b6459; /* 5.56:1 */ --faint: #948a7e; /* 3.23:1 — UI only, never information */ /* ── Teal: brand and success, identical by design ───────────────────── */ --primary: #0f6e63; /* 5.82:1 */ --primary-hover: #0c5a51; --primary-press: #094740; --primary-muted: #ddefeb; --primary-text: #ffffff; /* 6.12:1 on primary */ --primary-ghost: rgb(15 110 99 / 0.09); --success: #0f6e63; /* ── Signals ─────────────────────────────────────────────────────────── */ --accent: #3b5b8c; /* 6.53:1 — information, never an action */ --accent-muted: #e6ebf3; --warning: #8f5a12; /* 5.49:1 */ --warning-muted: #faf0de; --danger: #a8321f; /* 6.36:1 */ --danger-text: #ffffff; --danger-muted: #fae7e3; --focus: #0f6e63; /* Channel triples for translucent washes (gradients, rings, scrims). */ --primary-rgb: 15 110 99; --accent-rgb: 59 91 140; --ink-rgb: 26 24 21; /* ── Space · 8pt base (4px for optical nudges only) ─────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 48px; --s-9: 64px; --s-10: 80px; --s-12: 96px; /* ── Radii ───────────────────────────────────────────────────────────── */ --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-4: 24px; --r-5: 32px; --r-pill: 999px; --radius: 16px; /* legacy alias used across styles.css */ /* ── Sizing ──────────────────────────────────────────────────────────── */ --tap-min: 44px; --tap-comfort: 56px; --tap-primary: 60px; --max: 1240px; /* marketing page container — not the 45–70ch text measure */ /* ── Elevation · light falling on paper. Max ambient opacity is 10%. ── */ --elev-1: 0 1px 2px rgb(var(--ink-rgb) / 0.05), 0 1px 1px rgb(var(--ink-rgb) / 0.03); --elev-2: 0 4px 12px rgb(var(--ink-rgb) / 0.07), 0 1px 3px rgb(var(--ink-rgb) / 0.04); --elev-3: 0 16px 40px rgb(var(--ink-rgb) / 0.1), 0 4px 12px rgb(var(--ink-rgb) / 0.05); --halo: 0 0 0 12px rgb(var(--primary-rgb) / 0.06), 0 12px 32px rgb(var(--primary-rgb) / 0.14); /* ── Motion · settle, don't snap ─────────────────────────────────────── */ --dur-fast: 180ms; --dur-base: 260ms; --dur-slow: 360ms; --dur-page: 320ms; --ease: cubic-bezier(0.32, 0.72, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ── Type · Fraunces says what is happening, Inter says what you do ─── */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* ── Evening ──────────────────────────────────────────────────────────── Opt in with , or leave it to the media query below to follow the visitor's OS preference. */ :root[data-theme="dark"] { --bg: #141310; --bg-deep: #0e0d0b; --surface: #1d1b17; --card: #26231e; --card-hi: #2f2b25; --border: #3a3630; --border-strong: #6e675c; /* 3.32:1 */ --text: #f6f3ee; /* 16.79:1 */ --muted: #a9a196; /* 7.28:1 */ --faint: #7c7468; /* 4.03:1 */ --primary: #35c3ae; /* 8.46:1 */ --primary-hover: #4fd3c0; --primary-press: #26a895; --primary-muted: #10322d; --primary-text: #04211d; /* 7.71:1 on primary */ --primary-ghost: rgb(53 195 174 / 0.13); --success: #35c3ae; --accent: #8faedd; /* 8.20:1 */ --accent-muted: #1a2233; --warning: #e0a951; /* 8.82:1 */ --warning-muted: #33260f; --danger: #f08272; /* 7.20:1 */ --danger-text: #2b0d08; /* white would be 2.58:1 here */ --danger-muted: #331914; --focus: #6fe0cb; --primary-rgb: 53 195 174; --accent-rgb: 143 174 221; --ink-rgb: 0 0 0; --elev-1: 0 1px 2px rgb(0 0 0 / 0.34); --elev-2: 0 4px 12px rgb(0 0 0 / 0.4); --elev-3: 0 16px 40px rgb(0 0 0 / 0.52); --halo: 0 0 0 12px rgb(53 195 174 / 0.08), 0 12px 32px rgb(53 195 174 / 0.18); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #141310; --bg-deep: #0e0d0b; --surface: #1d1b17; --card: #26231e; --card-hi: #2f2b25; --border: #3a3630; --border-strong: #6e675c; --text: #f6f3ee; --muted: #a9a196; --faint: #7c7468; --primary: #35c3ae; --primary-hover: #4fd3c0; --primary-press: #26a895; --primary-muted: #10322d; --primary-text: #04211d; --primary-ghost: rgb(53 195 174 / 0.13); --success: #35c3ae; --accent: #8faedd; --accent-muted: #1a2233; --warning: #e0a951; --warning-muted: #33260f; --danger: #f08272; --danger-text: #2b0d08; --danger-muted: #331914; --focus: #6fe0cb; --primary-rgb: 53 195 174; --accent-rgb: 143 174 221; --ink-rgb: 0 0 0; --elev-1: 0 1px 2px rgb(0 0 0 / 0.34); --elev-2: 0 4px 12px rgb(0 0 0 / 0.4); --elev-3: 0 16px 40px rgb(0 0 0 / 0.52); --halo: 0 0 0 12px rgb(53 195 174 / 0.08), 0 12px 32px rgb(53 195 174 / 0.18); } } /* Motion is never load-bearing — remove movement, never information. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }