/* Layout tokens (theme-independent) */ :root { --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace; --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --nav-height: 56px; } /* Dark mode (default via data-theme on ) */ [data-theme="dark"] { color-scheme: dark; --color-bg: #0a0a0a; --color-surface: #141414; --color-surface-2: #1a1a1a; --color-border: rgba(255, 255, 255, 0.08); --color-border-hover: rgba(255, 255, 255, 0.15); --color-text: #ededed; --color-text-muted: #888888; --color-accent: #ffffff; --color-danger: #ef4444; --color-warning: #f59e0b; --color-success: #22c55e; --color-hover-overlay: rgba(255, 255, 255, 0.08); --color-view-filter-border: rgba(255, 255, 255, 0.18); --color-view-filter-text: #a3a3a3; --color-view-filter-text-hover: #f5f5f5; --color-view-filter-hover-bg: rgba(255, 255, 255, 0.06); --color-view-filter-active-bg: rgba(255, 255, 255, 0.16); --color-view-filter-active-text: #ffffff; --color-view-filter-active-ring: rgba(255, 255, 255, 0.32); } /* Light mode */ [data-theme="light"] { color-scheme: light; --color-bg: #fafafa; --color-surface: #ffffff; --color-surface-2: #f4f4f5; --color-border: rgba(0, 0, 0, 0.08); --color-border-hover: rgba(0, 0, 0, 0.16); --color-text: #171717; --color-text-muted: #737373; --color-accent: #171717; --color-danger: #dc2626; --color-warning: #d97706; --color-success: #16a34a; --color-hover-overlay: rgba(0, 0, 0, 0.05); --color-view-filter-border: rgba(0, 0, 0, 0.16); --color-view-filter-text: #525252; --color-view-filter-text-hover: #171717; --color-view-filter-hover-bg: rgba(0, 0, 0, 0.05); --color-view-filter-active-bg: #171717; --color-view-filter-active-text: #ffffff; --color-view-filter-active-ring: #171717; }