/* ============================================================ Quiet UI — design tokens Reference language: macOS system UI + OpenAI Codex app. Rules: near-monochrome, one accent, hairlines over borders, shadows only on floating layers, nothing decorative. Usage: link this file before ui.css and set data-theme="light" | "dark" on . ============================================================ */ :root, [data-theme='light'] { /* Native widgets (date picker, select popup, scrollbars) follow the theme. */ color-scheme: light; /* surfaces */ --bg: #ffffff; --bg-sidebar: #f6f6f7; --bg-inspector: #fbfbfc; --fill-quiet: rgba(0, 0, 0, 0.035); --fill-hover: rgba(0, 0, 0, 0.045); --fill-active: rgba(0, 0, 0, 0.075); --fill-select: rgba(0, 0, 0, 0.062); --field: #f2f2f4; --hairline: rgba(0, 0, 0, 0.075); --hairline-strong: rgba(0, 0, 0, 0.12); --hairline-loud: rgba(0, 0, 0, 0.2); /* ink */ --fg: #0d0d0d; --fg-2: #5c5c60; --fg-3: #8e8e93; --fg-4: #b4b4b8; --fg-inverse: #ffffff; /* accent — macOS system blue */ --accent: #0069f5; --accent-fill: rgba(0, 105, 245, 0.1); /* status */ --ok: #1c8b41; --warn: #b26a00; --crit: #d1332a; --ok-fill: rgba(28, 139, 65, 0.1); --warn-fill: rgba(178, 106, 0, 0.11); --crit-fill: rgba(209, 51, 42, 0.1); /* Floating layers, graded: lift < menu < pop. lift — a raised segment or thumb, one hair off the surface; menu — menus, popovers, tooltips; pop — sheets, palettes, toasts: the only truly floating things. */ --shadow-lift: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-menu: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12); --shadow-pop: 0 0 0 0.5px rgba(0, 0, 0, 0.09), 0 12px 40px rgba(0, 0, 0, 0.16); /* Scrim behind sheets and palettes. */ --scrim: rgba(0, 0, 0, 0.14); } [data-theme='dark'] { color-scheme: dark; --bg: #1a1a1c; --bg-sidebar: #121213; --bg-inspector: #161618; --fill-quiet: rgba(255, 255, 255, 0.045); --fill-hover: rgba(255, 255, 255, 0.055); --fill-active: rgba(255, 255, 255, 0.1); --fill-select: rgba(255, 255, 255, 0.085); --field: #101011; --hairline: rgba(255, 255, 255, 0.075); --hairline-strong: rgba(255, 255, 255, 0.14); --hairline-loud: rgba(255, 255, 255, 0.24); --fg: #f2f2f3; --fg-2: #a1a1a6; --fg-3: #77777c; --fg-4: #5a5a5f; --fg-inverse: #0d0d0d; --accent: #3b8cff; --accent-fill: rgba(59, 140, 255, 0.16); --ok: #37c65b; --warn: #f0a02a; --crit: #ff5f52; --ok-fill: rgba(55, 198, 91, 0.14); --warn-fill: rgba(240, 160, 42, 0.14); --crit-fill: rgba(255, 95, 82, 0.14); --shadow-lift: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-menu: 0 0 0 0.5px rgba(255, 255, 255, 0.09), 0 4px 18px rgba(0, 0, 0, 0.5); --shadow-pop: 0 0 0 0.5px rgba(255, 255, 255, 0.09), 0 12px 44px rgba(0, 0, 0, 0.6); /* Dark scrims must be stronger to read at all. */ --scrim: rgba(0, 0, 0, 0.45); } :root { --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; --mono: 'Berkeley Mono', 'TX-02', 'Geist Mono', ui-monospace, 'SF Mono', monospace; /* type — macOS control sizes */ --fs-0: 0.6875rem; /* 11px — statusbar, keycaps, micro metadata */ --fs-1: 0.75rem; /* 12px — labels, metadata */ --fs-2: 0.8125rem; /* 13px — body / rows / controls */ --fs-3: 0.9375rem; /* 15px — titles */ --fs-4: 1.3125rem; /* 21px — large numerals */ /* space — 4px base */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 28px; --s8: 32px; --s10: 40px; --r-sm: 5px; --r-md: 7px; --r-lg: 10px; --r-xl: 14px; --r-pill: 999px; --ease: cubic-bezier(0.32, 0.72, 0, 1); --dur-fast: 100ms; /* hovers, small fades */ --dur: 160ms; /* everything else */ --dur-slow: 260ms; /* panes sliding, one per screen at most */ /* Disabled controls keep their shape and drop their ink. */ --disabled: 0.45; --w-sidebar: 232px; --w-inspector: 336px; /* One measure for the list: it stops growing and stays centred, so the rows read as a single object instead of a wall spanning the window. */ --w-col: 1040px; --h-row: 40px; }