/* ============================================================ PWD Dashboard — design tokens ============================================================ 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 — Carefree Creative monstera green. Deep, slightly desaturated leaf-green for the primary; darker for hover/borders; pale wash for tinted backgrounds (chips, active filter pills, etc.). */ --brand: #2d6a4f; --brand-dark: #1b4332; --brand-light: #d8f3dc; /* Status colors */ --success: #16a34a; --warning: #d97706; --danger: #dc2626; --info: #0891b2; /* Project status badges */ --status-sales: #8b5cf6; --status-build: #f59e0b; --status-active: #16a34a; --status-maintenance: #0891b2; --status-sunsetting: #d97706; --status-archived: #6b7280; /* Surfaces */ --bg: #f8fafc; --bg-elevated: #ffffff; --bg-sunken: #f1f5f9; --bg-hover: #f3f4f6; /* Text */ --text: #0f172a; --text-muted: #475569; --text-subtle: #94a3b8; --text-inverse: #ffffff; /* Borders */ --border: #e2e8f0; --border-strong:#cbd5e1; --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 — a fresh young-monstera green vs the deep leaf in light mode. */ --brand: #74c69d; --brand-dark: #95d5b2; --brand-light: rgba(116, 198, 157, 0.14); /* Status colors — slightly lighter for dark-mode contrast */ --success: #4ade80; --warning: #fbbf24; --danger: #f87171; --info: #22d3ee; --status-sales: #a78bfa; --status-build: #fbbf24; --status-active: #4ade80; --status-maintenance: #22d3ee; --status-sunsetting: #fbbf24; --status-archived: #94a3b8; /* Charcoal palette with a *whisper* of green — barely-perceptible, so the UI reads as neutral dark first, monstera second. */ --bg: #111413; --bg-elevated: #1a1d1c; --bg-sunken: #0d100f; --bg-hover: #222624; --text: #eef0ee; --text-muted: #c4c9c5; --text-subtle: #707773; --text-inverse: #111413; --border: #2a2e2c; --border-strong:#454a47; --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: #74c69d; --brand-dark: #95d5b2; --brand-light: rgba(116, 198, 157, 0.14); --success: #4ade80; --warning: #fbbf24; --danger: #f87171; --info: #22d3ee; --status-sales: #a78bfa; --status-build: #fbbf24; --status-active: #4ade80; --status-maintenance: #22d3ee; --status-sunsetting: #fbbf24; --status-archived: #94a3b8; /* Charcoal with a whisper of green — mirrors [data-theme="dark"]. */ --bg: #111413; --bg-elevated: #1a1d1c; --bg-sunken: #0d100f; --bg-hover: #222624; --text: #eef0ee; --text-muted: #c4c9c5; --text-subtle: #707773; --text-inverse: #111413; --border: #2a2e2c; --border-strong:#454a47; --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; } }