/* ===================================================================== Nirvaan Design System — Theme Presets Each theme overrides token names defined in ds-tokens.css. Applied via by ds-theme.js (localStorage). The SIDEBAR stays the midnight "chrome" in every theme (not overridden here) so the product identity is consistent. Themes restyle the content area + brand accent only. Default = indigo primary + violet accent (no override needed). ===================================================================== */ /* ---- Theme: Modern Blue (brighter, cooler blue) ---- */ [data-theme="modern-blue"] { --c-primary: #2563eb; --c-primary-rgb: 37, 99, 235; --c-primary-hover: #1d4ed8; --c-primary-active: #1e40af; --c-primary-soft: #e6efff; --c-accent: #0ea5e9; --c-accent-rgb: 14, 165, 233; --c-accent-hover: #0284c7; --c-accent-soft: #e0f4fe; --aurora: linear-gradient(100deg, #2563eb, #0ea5e9); --aurora-glow: 0 8px 22px -6px rgba(37, 99, 235, 0.45); --c-focus: rgba(37, 99, 235, 0.35); } /* ---- Theme: Emerald ---- */ [data-theme="emerald"] { --c-primary: #059669; --c-primary-rgb: 5, 150, 105; --c-primary-hover: #047857; --c-primary-active: #065f46; --c-primary-soft: #e2f6ee; --c-accent: #14b8a6; --c-accent-rgb: 20, 184, 166; --c-accent-hover: #0d9488; --c-accent-soft: #ddf7f4; --aurora: linear-gradient(100deg, #059669, #14b8a6); --aurora-glow: 0 8px 22px -6px rgba(5, 150, 105, 0.45); --c-focus: rgba(5, 150, 105, 0.32); } /* ---- Theme: Indigo ---- */ [data-theme="indigo"] { --c-primary: #4f46e5; --c-primary-rgb: 79, 70, 229; --c-primary-hover: #4338ca; --c-primary-active: #3730a3; --c-primary-soft: #ebeafd; --c-accent: #a855f7; --c-accent-rgb: 168, 85, 247; --c-accent-hover: #9333ea; --c-accent-soft: #f4e9fe; --aurora: linear-gradient(100deg, #4f46e5, #a855f7); --aurora-glow: 0 8px 22px -6px rgba(79, 70, 229, 0.45); --c-focus: rgba(79, 70, 229, 0.32); } /* ---- Theme: Teal (bright cyan combo) ---- */ [data-theme="teal"] { --c-primary: #0ea5c9; --c-primary-rgb: 14, 165, 201; --c-primary-hover: #0c90b1; --c-primary-active: #0b7f9b; --c-primary-soft: #d9f2fa; --c-accent: #3cc3e0; --c-accent-rgb: 60, 195, 224; --c-accent-hover: #0ea5c9; --c-accent-soft: #ddf5fc; --aurora: linear-gradient(135deg, #3cc3e0, #0ea5c9 55%, #0b7f9b); --aurora-glow: 0 8px 22px -6px rgba(14, 165, 201, 0.45); --c-focus: rgba(14, 165, 201, 0.32); } /* ---- Theme: Slate Dark (content area dark; sidebar keeps midnight chrome) ---- */ [data-theme="slate-dark"] { --c-primary: #6b8bff; --c-primary-rgb: 107, 139, 255; --c-primary-hover: #829dff; --c-primary-active: #5878f0; --c-primary-soft: rgba(107, 139, 255, 0.16); --c-primary-contrast: #0b1120; --c-accent: #a99cff; --c-accent-rgb: 169, 156, 255; --c-accent-hover: #b8adff; --c-accent-soft: rgba(169, 156, 255, 0.16); --aurora: linear-gradient(100deg, #6b8bff, #a99cff); --aurora-glow: 0 8px 22px -6px rgba(107, 139, 255, 0.5); --c-success: #34d399; --c-success-rgb: 52, 211, 153; --c-success-soft: rgba(52,211,153,.14); --c-warning: #fbbf24; --c-warning-rgb: 251, 191, 36; --c-warning-soft: rgba(251,191,36,.14); --c-danger: #f87171; --c-danger-rgb: 248, 113, 113; --c-danger-soft: rgba(248,113,113,.14); --c-info: #38bdf8; --c-info-rgb: 56, 189, 248; --c-info-soft: rgba(56,189,248,.14); --c-bg: #0b1120; --c-surface: #131b2e; --c-surface-2: #172138; --c-surface-3: #1f2b45; --c-border: #263350; --c-border-strong: #35456a; --c-text: #e6edf7; --c-text-muted: #9fb0c9; --c-text-subtle: #6b7d99; --c-text-invert: #0b1120; --c-header-bg: rgba(11, 17, 32, 0.82); --c-header-border: #263350; --c-focus: rgba(107, 139, 255, 0.4); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 4px 16px -2px rgba(0, 0, 0, 0.5); --shadow-3: 0 24px 48px -12px rgba(0, 0, 0, 0.6); color-scheme: dark; }