@font-face { font-family: "Gambarino"; src: url("/fonts/Gambarino-Regular.woff2") format("woff2"), url("/fonts/Gambarino-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } * { box-sizing: border-box; } html, body, #root { margin: 0; padding: 0; min-height: 100%; } body { -webkit-font-smoothing: antialiased; } /* Theme tokens — light (default) values. theme.ts reads these via var(), so every existing c.text/c.surface/etc. call site repaints correctly the moment [data-theme="dark"] is set on , with zero changes needed at call sites. Flat, bordered-surface system — no backdrop-filter, no gradients on chrome, minimal shadow reserved for genuinely floating elements (modals, popovers, tooltips). Two surface levels: --lp-surface is the page background, and the glass/tint/inset variable group below is the single "card" surface used for the sidebar, topbar, content cards, and dense/data surfaces alike — they differ mainly in border/shadow, not background. */ :root { --lp-surface: #fbfbfa; --lp-surface-subtle: #f0f0ee; --lp-text: #0e0e10; --lp-text-muted: #6b6b6f; --lp-text-faint: #9a9a9e; --lp-border: rgba(15, 15, 15, 0.09); --lp-border-soft: rgba(15, 15, 15, 0.06); --lp-shadow-sm: 0 1px 2px rgba(15, 15, 15, 0.05); --lp-shadow-md: 0 4px 16px rgba(15, 15, 15, 0.08), 0 1px 4px rgba(15, 15, 15, 0.04); --lp-shadow-lg: 0 12px 36px rgba(15, 15, 15, 0.12), 0 2px 8px rgba(15, 15, 15, 0.05); --lp-empty-glow-1: rgba(0, 104, 214, 0.04); --lp-empty-glow-2: rgba(94, 196, 255, 0.05); --lp-accent-wash-1: rgba(0, 104, 214, 0.07); --lp-accent-border-soft: rgba(0, 104, 214, 0.16); --lp-green-wash-1: rgba(14, 156, 149, 0.1); --lp-green-border-soft: rgba(14, 156, 149, 0.22); --lp-orange-wash-1: rgba(224, 102, 62, 0.1); --lp-orange-border-soft: rgba(192, 54, 43, 0.22); --lp-glass-heavy-bg: #ffffff; --lp-glass-heavy-border: rgba(15, 15, 15, 0.08); --lp-glass-standard-bg: #ffffff; --lp-glass-standard-border: rgba(15, 15, 15, 0.08); --lp-glass-film-bg: #ffffff; --lp-glass-film-border: rgba(15, 15, 15, 0.08); --lp-card-hover-bg: #f6f6f5; --lp-tint-bg: #f4f4f3; --lp-tint-border: rgba(15, 15, 15, 0.06); --lp-glass-inset-bg: #f4f4f3; --lp-glass-inset-border: rgba(15, 15, 15, 0.07); --lp-nav-hover: rgba(15, 15, 15, 0.045); --lp-kbd-bg: #ffffff; --lp-card-fade: rgba(255, 255, 255, 0.6); --lp-empty-border: rgba(15, 15, 15, 0.08); --lp-scrim: rgba(20, 22, 26, 0.32); --lp-ambient-bg: #fbfbfa; } /* Dark mode — pitch black page background; cards sit one shade up (near-black, not the same black as the page) so borders alone create separation, no glow/blur needed. Washes and shadows re-tuned rather than inverted. */ [data-theme="dark"] { color-scheme: dark; --lp-surface: #000000; --lp-surface-subtle: #0a0a0a; --lp-text: #f2f2f3; --lp-text-muted: #9a9a9e; --lp-text-faint: #6b6b70; --lp-border: rgba(255, 255, 255, 0.1); --lp-border-soft: rgba(255, 255, 255, 0.06); --lp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --lp-shadow-md: 0 6px 24px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.4); --lp-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.45); --lp-empty-glow-1: rgba(0, 104, 214, 0.1); --lp-empty-glow-2: rgba(94, 196, 255, 0.12); --lp-accent-wash-1: rgba(0, 104, 214, 0.16); --lp-accent-border-soft: rgba(94, 196, 255, 0.26); --lp-green-wash-1: rgba(14, 156, 149, 0.18); --lp-green-border-soft: rgba(18, 184, 176, 0.28); --lp-orange-wash-1: rgba(224, 102, 62, 0.18); --lp-orange-border-soft: rgba(224, 102, 62, 0.28); --lp-glass-heavy-bg: #0c0c0e; --lp-glass-heavy-border: rgba(255, 255, 255, 0.09); --lp-glass-standard-bg: #0c0c0e; --lp-glass-standard-border: rgba(255, 255, 255, 0.09); --lp-glass-film-bg: #0c0c0e; --lp-glass-film-border: rgba(255, 255, 255, 0.09); --lp-card-hover-bg: #17171a; --lp-tint-bg: rgba(255, 255, 255, 0.05); --lp-tint-border: rgba(255, 255, 255, 0.08); --lp-glass-inset-bg: rgba(255, 255, 255, 0.04); --lp-glass-inset-border: rgba(255, 255, 255, 0.07); --lp-nav-hover: rgba(255, 255, 255, 0.05); --lp-kbd-bg: rgba(255, 255, 255, 0.06); --lp-card-fade: rgba(0, 0, 0, 0.6); --lp-empty-border: rgba(255, 255, 255, 0.08); --lp-scrim: rgba(0, 0, 0, 0.6); --lp-ambient-bg: #000000; } body { background: var(--lp-surface); transition: background-color 0.2s ease; } :focus { outline: none; } :focus-visible { outline: 2px solid #0068d6; outline-offset: 2px; border-radius: 6px; } /* Flat card surfaces — a single visual treatment (bg + hairline border) shared by the sidebar, topbar, content cards, and dense/data surfaces. "heavy" is for genuinely floating chrome (sidebar, modals, popovers) and gets a small shadow; "standard"/"film" are inline surfaces and stay flat with no shadow. */ .lp-glass-heavy { position: relative; background: var(--lp-glass-heavy-bg); border: 1px solid var(--lp-glass-heavy-border); box-shadow: var(--lp-shadow-sm); } .lp-glass-standard { position: relative; background: var(--lp-glass-standard-bg); border: 1px solid var(--lp-glass-standard-border); } .lp-glass-film { position: relative; background: var(--lp-glass-film-bg); border: 1px solid var(--lp-glass-film-border); } /* Flat neutral tile — input backgrounds, small repeated tiles (picker grids, per-row stat chips). */ .lp-tint { background: var(--lp-tint-bg); border: 1px solid var(--lp-tint-border); } /* Recessed "well" — search bars and small in-card metric wells, reads as pressed-in rather than a raised card. */ .lp-glass-inset { background: var(--lp-glass-inset-bg); border: 1px solid var(--lp-glass-inset-border); } /* Additive modifier: was a colored bloom shadow — flattened to nothing, the tone-tinted background (wash1/wash2) already carries the emphasis. */ .lp-glass-glow { box-shadow: none; } /* Additive modifier: subtle hover tint for tappable cards — no lift, no glow. */ .lp-glass-interactive { cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .lp-glass-interactive:hover { background: var(--lp-card-hover-bg); } /* Additive modifier: was an animated specular sweep — removed. Flat surfaces don't need a "liquid" highlight; kept as a no-op class so call sites that still combine it with other glass classes don't need to change. */ .lp-glass-sheen { position: relative; } /* Ambient background — flat fill, no color blobs. */ .lp-ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--lp-ambient-bg); }