/* ============================================================ WFC Dashboard — design tokens (purple/violet) ============================================================ Theme is set via [data-theme="light"|"dark"] on , written by the early-paint script in head.php. "system" mode unsets the attribute and falls back to @media (prefers-color-scheme: dark). ============================================================ */ :root { /* ── LIGHT (default) ─────────────────────────────────────── */ /* Brand — Purple/violet ("form-checker") */ --brand: #7c3aed; /* violet-600 */ --brand-dark: #5b21b6; /* violet-800 */ --brand-light: #f5f3ff; /* violet-50 — used for hover backgrounds */ /* Status colors */ --success: #16a34a; --warning: #d97706; --danger: #dc2626; --info: #0891b2; /* Project status badges */ --status-sales: #8b5cf6; --status-active: #16a34a; --status-maintenance: #0891b2; --status-sunsetting: #d97706; --status-archived: #6b7280; /* Surfaces */ /* Lavender-tinted surfaces — the agency-dashboard feel without overpowering the content. Sidebar reads as a soft lilac panel against off-white main, with cards bright white for focus. */ --bg: #faf7ff; /* main content */ --bg-elevated: #ffffff; /* cards */ --bg-sunken: #ede5f8; /* sidenav + sunken panels */ --bg-hover: #f3edfa; /* row hover */ /* Text */ --text: #1a0f2e; /* deep violet-black for max contrast */ --text-muted: #5b4b73; --text-subtle: #9a8db0; --text-inverse: #ffffff; /* Borders */ --border: #e3d9f3; --border-strong:#c9b8e2; --border-focus: var(--brand); /* Alerts */ --alert-info-bg: #eff6ff; --alert-info-text: #1e40af; --alert-info-border: #bfdbfe; --alert-success-bg: #f0fdf4; --alert-success-text: #166534; --alert-success-border: #bbf7d0; --alert-warning-bg: #fffbeb; --alert-warning-text: #92400e; --alert-warning-border: #fde68a; --alert-danger-bg: #fef2f2; --alert-danger-text: #991b1b; --alert-danger-border: #fecaca; /* Shape — kept tight; bump if you want softer */ --radius-sm: 2px; --radius: 4px; --radius-lg: 6px; /* Shadow */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12); /* Layout */ --sidenav-width: 240px; --topbar-height: 56px; --content-max: 1200px; /* Type */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; color-scheme: light; } /* ── DARK ────────────────────────────────────────────────────── Carefully tuned for contrast on real OLED displays. Sidenav slightly darker than content (depth), cards slightly lighter (focus), borders low-contrast but visible. ────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { /* Brand reads brighter on dark — violet-400 / 300 */ --brand: #a78bfa; --brand-dark: #c4b5fd; --brand-light: rgba(167, 139, 250, 0.14); /* Status colors — slightly lighter for dark-mode contrast */ --success: #4ade80; --warning: #fbbf24; --danger: #f87171; --info: #22d3ee; --status-sales: #a78bfa; --status-active: #4ade80; --status-maintenance: #22d3ee; --status-sunsetting: #fbbf24; --status-archived: #94a3b8; /* Near-black with a whisper of purple. Sidebar pushed to pure black for max contrast; cards barely lifted so they still register. */ --bg: #07050b; /* main content — almost black */ --bg-elevated: #100b18; /* cards — just enough lift */ --bg-sunken: #020103; /* sidebar / sunken — effectively black */ --bg-hover: #1a1325; /* row hover — visible against bg */ --text: #efe9f7; --text-muted: #b5a7cf; --text-subtle: #6a5d83; --text-inverse: #07050b; --border: #221a30; --border-strong:#3a2a52; --alert-info-bg: rgba(96,165,250,0.10); --alert-info-text: #93c5fd; --alert-info-border: rgba(96,165,250,0.30); --alert-success-bg: rgba(74,222,128,0.10); --alert-success-text: #86efac; --alert-success-border: rgba(74,222,128,0.30); --alert-warning-bg: rgba(251,191,36,0.10); --alert-warning-text: #fcd34d; --alert-warning-border: rgba(251,191,36,0.30); --alert-danger-bg: rgba(248,113,113,0.10);--alert-danger-text: #fca5a5; --alert-danger-border: rgba(248,113,113,0.30); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); color-scheme: dark; } /* ── SYSTEM mode — no [data-theme] attribute set, follow OS ─── */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --brand: #a78bfa; --brand-dark: #c4b5fd; --brand-light: rgba(167, 139, 250, 0.14); --success: #4ade80; --warning: #fbbf24; --danger: #f87171; --info: #22d3ee; --status-sales: #a78bfa; --status-active: #4ade80; --status-maintenance: #22d3ee; --status-sunsetting: #fbbf24; --status-archived: #94a3b8; /* Near-black with whisper of purple — mirrors [data-theme="dark"]. */ --bg: #07050b; --bg-elevated: #100b18; --bg-sunken: #020103; --bg-hover: #1a1325; --text: #efe9f7; --text-muted: #b5a7cf; --text-subtle: #6a5d83; --text-inverse: #07050b; --border: #221a30; --border-strong:#3a2a52; --alert-info-bg: rgba(96,165,250,0.10); --alert-info-text: #93c5fd; --alert-info-border: rgba(96,165,250,0.30); --alert-success-bg: rgba(74,222,128,0.10); --alert-success-text: #86efac; --alert-success-border: rgba(74,222,128,0.30); --alert-warning-bg: rgba(251,191,36,0.10); --alert-warning-text: #fcd34d; --alert-warning-border: rgba(251,191,36,0.30); --alert-danger-bg: rgba(248,113,113,0.10);--alert-danger-text: #fca5a5; --alert-danger-border: rgba(248,113,113,0.30); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); color-scheme: dark; } }