:root { /* Palette (dark first) */ --color-bg: #0d1117; --color-bg-alt: #161b22; --color-surface: #1e2530; --color-surface-alt: #25303b; --color-border: #2d3742; --color-border-accent: #3b82f6; --color-accent: #3b82f6; --color-accent-hover: #2563eb; --color-accent-soft: rgba(59,130,246,.14); --color-danger: #ef4444; --color-warn: #f59e0b; --color-ok: #10b981; --color-info: #0ea5e9; --color-text: #f1f5f9; --color-text-dim: #94a3b8; --color-focus-ring: 0 0 0 3px rgba(59,130,246,.4); /* Typography */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Radii */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px; /* Spacing Scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.38); --shadow-lg: 0 8px 28px rgba(0,0,0,.45); /* Transitions */ --ease-standard: cubic-bezier(.4,0,.2,1); --transition-fast: 120ms var(--ease-standard); --transition: 180ms var(--ease-standard); } /* Light theme overrides when [data-theme="light"] present on html */ html[data-theme="light"] { --color-bg: #f5f7fb; --color-bg-alt: #eef1f6; --color-surface: #ffffff; --color-surface-alt: #f1f5f9; --color-border: #d1dae3; --color-border-accent: #3b82f6; --color-text: #1e2935; --color-text-dim: #64748b; --color-accent-soft: rgba(59,130,246,.10); } /* Dark theme explicit (for completeness) */ /* Smooth theme transitions (activated after initial paint by adding .theme-animate to ) */ html.theme-animate body, html.theme-animate .topbar, html.theme-animate .chip, html.theme-animate .user-menu-panel, html.theme-animate .table, html.theme-animate button, html.theme-animate input, html.theme-animate select, html.theme-animate .card, html.theme-animate .status-badge, html.theme-animate .progress, html.theme-animate .toast { transition: background-color var(--transition), color var(--transition), border-color var(--transition), fill var(--transition), stroke var(--transition); }