/* ============================================================ tokens.css — design tokens (single source of truth) Dark is the default theme (:root); light overrides via [data-theme="light"] set on by /ui/theme.js. Every color in the app must come from these variables. ============================================================ */ :root { color-scheme: dark; /* --- Surfaces --- */ --bg: #0d1117; /* page background */ --bg-raised: #12161f; /* shell bars, rails */ --card: #161c27; /* cards, panels, dialogs */ --card-2: #1b2230; /* hover / inset / table stripe */ --card-3: #212a3b; /* pressed / selected fill */ /* --- Lines & borders --- */ --line: #28303f; --line-strong: #38455c; /* --- Text --- */ --ink: #e7ecf4; --muted: #8b96ab; --faint: #5f6b80; /* --- Accent (primary action / selection) --- */ --accent: #3b82f6; --accent-strong: #2563eb; --accent-ink: #ffffff; /* text on accent fills */ --accent-soft: rgba(59, 130, 246, .16); --accent-line: rgba(59, 130, 246, .45); /* --- Semantic --- */ --ok: #34d399; --ok-soft: rgba(52, 211, 153, .14); --warn: #f59e0b; --warn-soft: rgba(245, 158, 11, .15); --danger: #f87171; --danger-strong: #ef4444; --danger-soft: rgba(248, 113, 113, .14); --info: #818cf8; --info-soft: rgba(129, 140, 248, .15); /* --- Focus --- */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(59, 130, 246, .55); /* --- Elevation --- */ --shadow-1: 0 1px 2px rgba(0, 0, 0, .35); --shadow-2: 0 4px 16px rgba(0, 0, 0, .45); --shadow-3: 0 12px 40px rgba(0, 0, 0, .55); /* --- Shape --- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; /* --- Spacing scale --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; /* --- Typography --- */ --font-ui: 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace; --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-md: 13.5px; /* base — data-dense app */ --fs-lg: 15px; --fs-xl: 18px; --fs-2xl: 22px; /* --- Layers --- */ --z-shell: 100; --z-dropdown: 500; --z-dialog: 800; --z-popover: 850; /* transient popovers (select listboxes, context menus) — must beat open dialogs */ --z-toast: 900; --z-tooltip: 950; /* --- Motion --- */ --ease: cubic-bezier(.2, .7, .3, 1); --t-fast: 120ms; --t-med: 200ms; /* --- Scrollbars --- */ --scrollbar-thumb: #333e52; --scrollbar-thumb-hover: #45536d; --scrollbar-track: transparent; } [data-theme="light"] { color-scheme: light; --bg: #f2f4f8; --bg-raised: #ffffff; --card: #ffffff; --card-2: #f5f7fb; --card-3: #eaeef5; --line: #e2e7ef; --line-strong: #c6d0de; --ink: #182130; --muted: #5d6b82; --faint: #97a2b6; --accent: #2563eb; --accent-strong: #1d4ed8; --accent-ink: #ffffff; --accent-soft: rgba(37, 99, 235, .10); --accent-line: rgba(37, 99, 235, .40); --ok: #059669; --ok-soft: rgba(5, 150, 105, .10); --warn: #b45309; --warn-soft: rgba(180, 83, 9, .12); --danger: #dc2626; --danger-strong: #b91c1c; --danger-soft: rgba(220, 38, 38, .09); --info: #4f46e5; --info-soft: rgba(79, 70, 229, .10); --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(37, 99, 235, .5); --shadow-1: 0 1px 2px rgba(23, 32, 47, .08); --shadow-2: 0 4px 16px rgba(23, 32, 47, .12); --shadow-3: 0 12px 40px rgba(23, 32, 47, .18); --scrollbar-thumb: #c3cddc; --scrollbar-thumb-hover: #a8b6ca; }