/* * Theme CSS Variables * * This file defines all color variables for light and dark themes. * Use var(--color-xxx) in your stylesheets to reference these colors. * * The theme is controlled by the `data-theme` attribute on . * ThemeProvider automatically manages this attribute. */ /* ===== Light Theme (Default) ===== */ :root, [data-theme="light"] { /* Base colors */ --color-background: #f8fafc; --color-surface: #ffffff; --color-surface-hover: #f1f5f9; --color-border: #e2e8f0; /* Text colors */ --color-text: #1e293b; --color-text-secondary: #64748b; /* Brand colors */ --color-primary: #3b82f6; --color-primary-hover: #2563eb; /* Semantic colors */ --color-success: #10b981; --color-success-bg: #d1fae5; --color-error: #ef4444; --color-error-bg: #fee2e2; --color-warning: #f59e0b; --color-warning-bg: #fef3c7; --color-info: #3b82f6; --color-info-bg: #dbeafe; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); } /* ===== Dark Theme ===== */ [data-theme="dark"] { /* Base colors */ --color-background: #0f172a; --color-surface: #1e293b; --color-surface-hover: #334155; --color-border: #334155; /* Text colors */ --color-text: #f1f5f9; --color-text-secondary: #94a3b8; /* Brand colors */ --color-primary: #3b82f6; --color-primary-hover: #60a5fa; /* Semantic colors */ --color-success: #10b981; --color-success-bg: #064e3b; --color-error: #ef4444; --color-error-bg: #7f1d1d; --color-warning: #f59e0b; --color-warning-bg: #78350f; --color-info: #3b82f6; --color-info-bg: #1e3a5f; /* Shadows (darker for dark mode) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4); } /* ===== Color Scheme Meta ===== */ :root { color-scheme: light dark; } [data-theme="light"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; }