/* ============================================================ ParusVoice — Design tokens Zuerst laden (vor site.css). Fonts werden im via geladen (Google Fonts; TODO: self-host fuer EU/Performance). ============================================================ */ :root { /* ---------- Color : Neutrals ---------- */ --ink: #0F1115; /* Primary text, dark surfaces */ --ink-2: #1A1D24; /* Elevated dark surface */ --ink-3: #2A2E37; /* Dark-mode borders */ --graphite: #3A3D44; /* Tertiary text on light */ --stone: #6B6F76; /* Secondary text */ --bone: #DDD7C9; /* Hairlines, dividers, muted chips */ --paper-2: #EAE6DC; /* Secondary surface */ --paper: #F2EFE8; /* Primary light background — warm cream */ --paper-hi: #F8F6F0; /* Highest light surface (cards on paper) */ /* ---------- Color : Brand ---------- */ --sage: #3F5B4C; /* Brand accent — calm, clinical */ --sage-soft: #7A9583; /* Hover / lighter sage */ --sage-ink: #23362C; /* Deeper sage for dark mode */ /* ---------- Color : Signal (recording / active dictation only) ---------- */ --cardinal: #C8443B; --cardinal-soft: #E5A39E; /* ---------- Color : Accent (Butter — for highlight surfaces, marketing panels, chips) ---------- */ --accent: #F2D27A; --accent-soft: #FAEACB; --accent-ink: #5C4514; /* ---------- Color : Semantic ---------- */ --success: #3F5B4C; /* same as sage on purpose */ --warning: #B8862C; /* warm amber, used sparingly */ --danger: #C8443B; /* same as cardinal */ --info: #2D6A78; /* deep teal, factual neutral */ /* ---------- Semantic foreground/background aliases (light) ---------- */ --fg-1: var(--ink); --fg-2: var(--graphite); --fg-3: var(--stone); --fg-on-dark: var(--paper); --bg-1: var(--paper); --bg-2: var(--paper-2); --bg-3: var(--paper-hi); --border-1: var(--bone); --border-2: rgba(15,17,21,0.08); /* ---------- Type : families ---------- */ --font-sans: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-serif: 'Instrument Serif', 'Times New Roman', serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---------- Type : scale ---------- */ --t-display: 72px; --t-display-lh: 76px; --t-display-tr: -0.02em; --t-h1: 48px; --t-h1-lh: 52px; --t-h1-tr: -0.015em; --t-h2: 32px; --t-h2-lh: 38px; --t-h2-tr: -0.01em; --t-h3: 22px; --t-h3-lh: 28px; --t-h3-tr: -0.005em; --t-body-lg: 18px; --t-body-lg-lh: 28px; --t-body: 15px; --t-body-lh: 22px; --t-ui: 13px; --t-ui-lh: 18px; --t-micro: 11px; --t-micro-lh: 14px; --t-micro-tr: 0.06em; /* ---------- Spacing (4-px grid, t-shirt scale) ---------- */ --s-0: 0px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ---------- Radii ---------- */ --r-0: 0px; --r-1: 4px; --r-2: 8px; --r-3: 14px; --r-pill: 999px; /* ---------- Borders ---------- */ --hairline: 1px solid var(--border-1); /* ---------- Shadows ---------- */ --shadow-1: 0 1px 2px rgba(15,17,21,.04), 0 1px 1px rgba(15,17,21,.03); --shadow-2: 0 4px 12px rgba(15,17,21,.06), 0 2px 4px rgba(15,17,21,.04); --shadow-hud: 0 16px 48px rgba(15,17,21,.28), 0 4px 12px rgba(15,17,21,.18), inset 0 1px 0 rgba(255,255,255,.06); /* ---------- Motion ---------- */ --ease: cubic-bezier(.2,.7,.2,1); --dur-fast: 120ms; --dur: 180ms; --dur-slow: 220ms; /* ---------- Layout ---------- */ --container: 1160px; --gutter: 24px; } /* ============================================================ Semantic element styles ============================================================ */ .pv-micro { font-size: var(--t-micro); line-height: var(--t-micro-lh); letter-spacing: var(--t-micro-tr); text-transform: uppercase; color: var(--fg-3); font-weight: 500; } .pv-mono { font-family: var(--font-mono); font-size: 13px; } /* ============================================================ Buttons — primitive styles ============================================================ */ .pv-btn { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-sans); font-size: var(--t-ui); font-weight: 500; line-height: 1; height: 36px; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1px solid transparent; text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease); cursor: pointer; user-select: none; } .pv-btn--primary { background: var(--ink); color: var(--paper); } .pv-btn--primary:hover { opacity: .82; } .pv-btn--primary:active { box-shadow: inset 0 1px 0 rgba(0,0,0,.18); } .pv-btn--secondary { background: transparent; color: var(--ink); border-color: var(--bone); } .pv-btn--secondary:hover { background: var(--paper-2); } .pv-btn--ghost { background: transparent; color: var(--ink); } .pv-btn--ghost:hover { background: var(--paper-2); } .pv-btn--sage { background: var(--sage); color: var(--paper); } .pv-btn--sage:hover { background: var(--sage-soft); } .pv-btn--sm { height: 28px; padding: 0 var(--s-3); font-size: 12px; } .pv-btn--lg { height: 44px; padding: 0 var(--s-5); font-size: 14px; } /* ============================================================ Focus — accessibility is not optional ============================================================ */ :focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }