/* =========================================================== Thesis A — Calm Dense For people doing work. Linear / Things / Geist references. =========================================================== */ [data-thesis="a"] { /* ---- Typography ---- */ --font-ui: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace; --type-display-2xl: 700 56px/1.05 var(--font-display); --type-display-xl: 600 40px/1.1 var(--font-display); --type-display-lg: 600 28px/1.2 var(--font-display); --type-display-md: 600 22px/1.25 var(--font-display); --type-heading-lg: 600 18px/1.3 var(--font-ui); --type-heading-md: 600 15px/1.4 var(--font-ui); --type-heading-sm: 600 13px/1.4 var(--font-ui); --type-body: 400 14px/1.5 var(--font-ui); --type-body-strong: 500 14px/1.5 var(--font-ui); --type-caption: 400 12px/1.4 var(--font-ui); --type-eyebrow: 600 11px/1.3 var(--font-ui); --type-mono: 400 13px/1.4 var(--font-mono); --letter-eyebrow: 0.06em; /* ---- Spacing (4px base) ---- */ --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; /* ---- Radii ---- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-pill: 999px; /* ---- Density ---- */ --control-height-sm: 28px; --control-height-md: 36px; --control-height-lg: 44px; --row-height: 32px; /* ---- Motion ---- */ --ease: cubic-bezier(0.2, 0, 0, 1); --motion-micro: 120ms; --motion-standard: 180ms; --motion-panel: 240ms; /* ---- Color: Paper (default) ---- */ --surface: #FFFFFF; --surface-raised: #FFFFFF; --surface-sunken: #F8FAFC; --surface-hover: #F1F5F9; --ink: #0F172A; --ink-muted: #475569; --ink-subtle: #64748B; --border: #E2E8F0; --border-strong: #CBD5E1; --focus-ring: #00B8ED; /* Semantic state — appears when state requires */ --color-state-info: var(--brand-cyan); --color-state-success: var(--brand-green); --color-state-caution: var(--brand-yellow); --color-state-danger: var(--brand-magenta); /* Primary action — ink-dark, NOT a brand color */ --color-action-bg: #0F172A; --color-action-bg-hover: #1E293B; --color-action-fg: #FFFFFF; /* Page-topic accent — pages opt in via class on */ --color-accent: var(--brand-cyan); /* Safe text color when the topic accent is set on a light background. For most accents this IS the accent; for yellow we fall back to ink because brand yellow on white is unreadable. */ --color-accent-readable: var(--brand-cyan); /* Brand mark — always painted in brand colors, even in chrome */ --color-brand-mark: var(--brand-magenta); --color-brand-mark-2: var(--brand-purple); --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06); --shadow-md: 0 4px 16px -4px rgba(15,23,42,0.12), 0 2px 6px rgba(15,23,42,0.06); --shadow-lg: 0 12px 32px -8px rgba(15,23,42,0.18), 0 4px 12px rgba(15,23,42,0.08); --shadow-focus: 0 0 0 3px rgba(0,184,237,0.32); /* Shell bar paint */ --shell-bar-bg: rgba(255,255,255,0.85); --shell-pills-bg: rgba(15,23,42,0.04); --shell-pill-hover: rgba(15,23,42,0.06); --shell-pill-active: #FFFFFF; /* Body defaults */ font-family: var(--font-ui); color: var(--ink); background: var(--surface); font-variant-numeric: tabular-nums; /* Tell the USER AGENT which palette it is painting. Without this the browser draws every native control it owns — a