:root { /* Backgrounds */ --bg-base: #fafaf9; --bg-surface: #ffffff; --bg-elevated: #f5f4f0; --bg-overlay: rgba(255, 255, 255, 0.85); /* Brand */ --brand-primary: #2563eb; --brand-primary-hover: #1d4ed8; --brand-primary-light: #eff6ff; --brand-accent: #f59e0b; /* Text */ --text-primary: #0f0f0e; --text-secondary: #6b7280; --text-tertiary: #9ca3af; --text-inverse: #ffffff; /* Borders */ --border-subtle: #f0efe9; --border-default: #e5e4df; --border-strong: #d1d0ca; --border-focus: var(--brand-primary); /* Shadows */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04); --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.06); --shadow-card: 0 0 0 1px var(--border-default), var(--shadow-sm); /* Semantic */ --error: #ef4444; --error-light: #fef2f2; --success: #10b981; --success-light: #ecfdf5; /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* Typography */ --font-display: "Bricolage Grotesque", Georgia, serif; --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* Transitions */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: 150ms var(--ease-out); --transition-base: 250ms var(--ease-out); --transition-slow: 400ms var(--ease-out); } /* ═══════════════════════════════════════ DARK THEME Applied via: ═══════════════════════════════════════ */ [data-theme="dark"] { /* Backgrounds */ --bg-base: #0f172a; --bg-surface: #1e293b; --bg-elevated: #263548; --bg-overlay: rgba(30, 41, 59, 0.92); /* Brand */ --brand-primary: #3b82f6; --brand-primary-hover: #60a5fa; --brand-primary-light: rgba(59, 130, 246, 0.15); /* Text */ --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-tertiary: #64748b; --text-inverse: #0f172a; /* Borders */ --border-subtle: #1e293b; --border-default: #2d3f55; --border-strong: #3d5068; --border-focus: #3b82f6; /* Shadows */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.4); --shadow-card: 0 0 0 1px var(--border-default), var(--shadow-sm); /* Semantic */ --error: #f87171; --error-light: rgba(248, 113, 113, 0.12); --success: #34d399; --success-light: rgba(52, 211, 153, 0.12); } [data-theme="dark"] * { scrollbar-color: var(--border-strong) var(--bg-base); } [data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-base); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); } html { transition: background-color 200ms ease, color 200ms ease; } *, *::before, *::after { transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; } input, textarea, select { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-default); } input::placeholder, textarea::placeholder { color: var(--text-tertiary); } input:focus, textarea:focus, select:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--brand-primary-light); }