/* ============================================================================ UniCircle — base.css Design tokens + reset + typography. Palette: paper / ink / cobalt (primary) / chartreuse (highlight, sparing) / slate (secondary text) / brick (alerts only). No purple, no glassmorphism. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root { /* Color */ --paper: #FAF9F6; --paper-dim: #F1EFE8; --ink: #14161F; --ink-soft: #262838; --cobalt: #2B4EFF; --cobalt-dim: #E9EDFF; --chartreuse: #C4F135; --slate: #5B6072; --slate-light: #9498A8; --brick: #E8483A; --brick-dim: #FCEBE9; --line: #E4E1D8; /* Dark mode surfaces (toggled via [data-theme="dark"] on ) */ --paper-dark: #14161F; --ink-dark: #F4F3EE; /* Type */ --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* Scale */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.5rem; /* Space */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Shape */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-card: 0 1px 2px rgba(20, 22, 31, 0.06), 0 8px 24px rgba(20, 22, 31, 0.05); --rail-width: 240px; } html[data-theme="dark"] { --paper: #14161F; --paper-dim: #1C1E2A; --ink: #F4F3EE; --ink-soft: #D8D6CC; --line: #2C2F3E; --cobalt-dim: #1D2547; --brick-dim: #3A1E1C; --slate: #9498A8; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 var(--space-3); letter-spacing: -0.01em; } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); } p { margin: 0 0 var(--space-4); color: var(--ink-soft); } a { color: var(--cobalt); text-decoration: none; } a:hover { text-decoration: underline; } small, .meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--slate); letter-spacing: 0.01em; } ul, ol { padding-left: 1.2em; } img, svg { max-width: 100%; display: block; } button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } /* Accessible focus ring everywhere, including custom controls */ :focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: var(--radius-sm); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .container { max-width: 1100px; margin-inline: auto; padding-inline: var(--space-5); } @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; } }