/* ============================================================ * MZ Cards Theme Overrides * Light/dark mode + accent color variants. * Phase 1 of UI Modernization. * * Tokens are defined in tokens.css. This file overrides accent * and surface colors based on data-theme / data-accent attributes * on the element. * ============================================================ */ /* === Light Accent Variants === */ /* Default cyan is provided by tokens.css :root. These override --accent / --accent-hover only. --accent-soft and --accent-border use color-mix and auto-adapt. */ :root[data-accent="blue"] { --accent: #2563eb; --accent-hover: #1d4ed8; } :root[data-accent="emerald"] { --accent: #059669; --accent-hover: #047857; } :root[data-accent="rose"] { --accent: #e11d48; --accent-hover: #be123c; } :root[data-accent="amber"] { --accent: #d97706; --accent-hover: #b45309; } :root[data-accent="violet"] { --accent: #7c3aed; --accent-hover: #6d28d9; } :root[data-accent="slate"] { --accent: #475569; --accent-hover: #334155; } /* === Dark Mode === */ :root[data-theme="dark"] { /* Semantic colors */ --bg: #0f1115; --surface: #171a21; --surface-2: #13151a; --surface-3: #1f232b; --surface-hover: #1f232b; --border: #272a31; --border-strong: #3a3f49; --text: #e5e7eb; --text-muted: #9ca3af; --text-subtle: #8b95a5; --accent: #00b5ef; --accent-hover: #4edcff; --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface)); --accent-border: color-mix(in srgb, var(--accent) 42%, var(--surface)); --accent-contrast: #ffffff; /* Status colors (dark) */ --success: #10b981; --success-soft: color-mix(in srgb, var(--success) 15%, var(--surface)); --success-text: #6ee7b7; --warning: #f59e0b; --warning-soft: color-mix(in srgb, var(--warning) 15%, var(--surface)); --warning-text: #fbbf24; --danger: #ef4444; --danger-soft: color-mix(in srgb, var(--danger) 15%, var(--surface)); --danger-text: #fca5a5; --info: #3b82f6; --info-soft: color-mix(in srgb, var(--info) 15%, var(--surface)); --info-text: #93c5fd; --neutral: #9ca3af; --neutral-soft: var(--surface-3); --neutral-text: #d1d5db; /* Dark shadows (deeper) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.40); color-scheme: dark; } /* === Dark Accent Variants === */ :root[data-theme="dark"][data-accent="blue"] { --accent: #3b82f6; --accent-hover: #60a5fa; } :root[data-theme="dark"][data-accent="emerald"] { --accent: #10b981; --accent-hover: #34d399; } :root[data-theme="dark"][data-accent="rose"] { --accent: #f43f5e; --accent-hover: #fb7185; } :root[data-theme="dark"][data-accent="amber"] { --accent: #f59e0b; --accent-hover: #fbbf24; --accent-contrast: #1c1917; } :root[data-theme="dark"][data-accent="violet"] { --accent: #8b5cf6; --accent-hover: #a78bfa; } :root[data-theme="dark"][data-accent="slate"] { --accent: #94a3b8; --accent-hover: #cbd5e1; }