/* ============================================================ Storiso Shared Theme — matches Portal (Storiso.Portal) palette Supports [data-theme="dark"] and [data-theme="light"] on ============================================================ */ /* ── Dark Mode (default) ─────────────────────────────────── */ :root, [data-theme="dark"] { /* Backgrounds — slate scale */ --bg-page: #020617; /* slate-950 */ --bg-surface: #0f172a; /* slate-900 — sidebar, cards */ --bg-elevated: #1e293b; /* slate-800 — modals, dropdowns */ --bg-muted: #334155; /* slate-700 — dividers, borders */ /* Text */ --text-primary: #ffffff; --text-body: #e2e8f0; /* slate-200 */ --text-muted: #94a3b8; /* slate-400 */ --text-subtle: #64748b; /* slate-500 */ /* Brand — indigo (primary) */ --color-primary: #4f46e5; /* indigo-600 */ --color-primary-hover: #6366f1; /* indigo-500 */ --color-primary-light: #818cf8; /* indigo-400 — text links */ --color-primary-faint: rgba(79, 70, 229, 0.10); /* indigo/10 */ /* Brand — amber (secondary / fuel accent) */ --color-secondary: #d97706; /* amber-600 */ --color-secondary-hover: #f59e0b; /* amber-500 */ /* Semantic */ --color-success: #10b981; /* emerald-500 */ --color-danger: #ef4444; /* red-500 */ --color-warning: #f59e0b; /* amber-500 */ --color-info: #6366f1; /* indigo-500 */ /* Sidebar gradient */ --sidebar-gradient: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); --sidebar-text: #e2e8f0; --sidebar-active: rgba(79, 70, 229, 0.37); --sidebar-hover: rgba(255, 255, 255, 0.08); --sidebar-brand: #818cf8; /* Top bar */ --topbar-bg: #0f172a; --topbar-border: #1e293b; --topbar-text: #94a3b8; /* Borders & shadows */ --border-color: #1e293b; /* slate-800 */ --border-subtle: #334155; /* slate-700 */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-primary: 0 0 20px rgba(79, 70, 229, 0.25); --shadow-primary-lg: 0 10px 25px rgba(79, 70, 229, 0.3); /* Form elements */ --input-bg: #1e293b; --input-border: #334155; --input-border-focus: #4f46e5; --input-text: #e2e8f0; --input-placeholder: #64748b; /* Loading progress */ --loading-track: #1e293b; --loading-fill: #4f46e5; /* Syncfusion theme override hint */ --sf-theme: "material3-dark"; } /* ── Light Mode ──────────────────────────────────────────── */ [data-theme="light"] { /* Backgrounds */ --bg-page: #ffffff; --bg-surface: #f8fafc; /* slate-50 */ --bg-elevated: #f1f5f9; /* slate-100 */ --bg-muted: #e2e8f0; /* slate-200 */ /* Text */ --text-primary: #0f172a; /* slate-900 */ --text-body: #1e293b; /* slate-800 */ --text-muted: #475569; /* slate-600 */ --text-subtle: #64748b; /* slate-500 */ /* Brand — indigo (same hue, slightly deeper hover) */ --color-primary: #4f46e5; /* indigo-600 */ --color-primary-hover: #4338ca; /* indigo-700 */ --color-primary-light: #6366f1; /* indigo-500 */ --color-primary-faint: rgba(79, 70, 229, 0.08); /* Brand — amber */ --color-secondary: #d97706; /* amber-600 */ --color-secondary-hover: #b45309; /* amber-700 */ /* Semantic */ --color-success: #059669; /* emerald-600 */ --color-danger: #dc2626; /* red-600 */ --color-warning: #d97706; /* amber-600 */ --color-info: #4f46e5; /* indigo-600 */ /* Sidebar — indigo gradient (keeps brand colour visible on white page) */ --sidebar-gradient: linear-gradient(180deg, #4f46e5 0%, #6366f1 100%); --sidebar-text: rgba(255, 255, 255, 0.85); --sidebar-active: rgba(255, 255, 255, 0.25); --sidebar-hover: rgba(255, 255, 255, 0.12); --sidebar-brand: #ffffff; /* Top bar */ --topbar-bg: #ffffff; --topbar-border: #e2e8f0; --topbar-text: #475569; /* Borders & shadows */ --border-color: #e2e8f0; /* slate-200 */ --border-subtle: #f1f5f9; /* slate-100 */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10); --shadow-primary: 0 0 20px rgba(79, 70, 229, 0.15); --shadow-primary-lg: 0 10px 25px rgba(79, 70, 229, 0.18); /* Form elements */ --input-bg: #ffffff; --input-border: #e2e8f0; --input-border-focus: #4f46e5; --input-text: #1e293b; --input-placeholder: #94a3b8; /* Loading progress */ --loading-track: #e2e8f0; --loading-fill: #4f46e5; --sf-theme: "bootstrap5"; } /* ── Smooth theme transition ─────────────────────────────── */ *, *::before, *::after { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.20s ease, box-shadow 0.25s ease; }