/* ========================================================= Shared design tokens — the common design language for every app in this project. Apps link this first, then their own stylesheet, and may add app-specific tokens on top. Ledger-inspired: system sans for UI chrome, tabular monospace for every number, so each app reads like a clean, fast logbook. Tokens are layered so theme/accent/compact can be swapped via attributes on without touching component rules. ========================================================= */ :root { /* -- themeable surface & text (dark default) -- */ --bg: #0B0D10; --surface: #14171C; --surface-2: #1B1F26; --surface-3: #232833; --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.14); --text: #ECEEF2; --text-dim: #8B92A0; --text-faint: #838A99; /* >=4.5:1 against --surface / --surface-2 */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 10px 30px -8px rgba(0, 0, 0, 0.55); /* -- semantic status (fixed across themes & accents) -- */ --good: #34D8A5; --good-dim: rgba(52, 216, 165, 0.2); --warn: #F5B95B; --warn-dim: rgba(245, 185, 91, 0.2); --bad: #F97166; --bad-dim: rgba(249, 113, 102, 0.2); /* -- accent (brand) — overridden per data-accent -- */ --accent: #34D8A5; --accent-dim: rgba(52, 216, 165, 0.14); --accent-strong: #2BC393; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-pill: 999px; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace; --ease: cubic-bezier(0.22, 1, 0.36, 1); --tabbar-h: 72px; /* -- spacing scale (adjusted under [data-compact]) -- */ --view-pad-x: 20px; --card-pad: 16px; } /* -- accent palettes -- */ :root[data-accent="teal"] { --accent: #34D8A5; --accent-dim: rgba(52, 216, 165, 0.14); --accent-strong: #2BC393; } :root[data-accent="violet"] { --accent: #A78BFA; --accent-dim: rgba(167, 139, 250, 0.16); --accent-strong: #8F6FF0; } :root[data-accent="blue"] { --accent: #5B9CF6; --accent-dim: rgba(91, 156, 246, 0.16); --accent-strong: #3E82E0; } :root[data-accent="amber"] { --accent: #F5B95B; --accent-dim: rgba(245, 185, 91, 0.18); --accent-strong: #DE9F3C; } :root[data-accent="rose"] { --accent: #FB7BA8; --accent-dim: rgba(251, 123, 168, 0.16); --accent-strong: #E85F90; } /* -- light theme -- */ :root[data-theme="light"] { --bg: #F4F5F7; --surface: #FFFFFF; --surface-2: #EEF0F3; --surface-3: #E4E7EC; --border: rgba(15, 23, 32, 0.08); --border-strong: rgba(15, 23, 32, 0.16); --text: #14171C; --text-dim: #565C68; --text-faint: #5F6673; /* >=4.5:1 against white / --surface-3 */ --shadow-1: 0 1px 2px rgba(15, 23, 32, 0.06); --shadow-2: 0 14px 32px -10px rgba(15, 23, 32, 0.16); } /* -- compact mode -- */ :root[data-compact="true"] { --view-pad-x: 14px; --card-pad: 12px; } /* -- animations off (independent of, and ORed with, prefers-reduced-motion) -- */ :root[data-animations="false"] *, :root[data-animations="false"] *::before, :root[data-animations="false"] *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }