/* ───────────────────────────────────────── IMS Multi-Theme System — 8 themes All components use var(--t-*) variables. Theme applied via data-theme on . ───────────────────────────────────────── */ /* ── Global theme application ──────────── */ body { background-color: var(--t-bg) !important; color: var(--t-text) !important; font-family: var(--t-font) !important; } #sidebar { background-color: var(--t-sidebar-bg) !important; color: var(--t-sidebar-text) !important; border-right-color: rgba(0,0,0,0.2) !important; } #sidebar .border-gray-700\/50, #sidebar .border-gray-700 { border-color: rgba(255,255,255,0.07) !important; } /* 0. CLASSIC — matches the existing app (dark gray sidebar, light body) */ :root, [data-theme="classic"] { --t-bg: #f9fafb; --t-surface: #ffffff; --t-surface2: #f3f4f6; --t-text: #111827; --t-muted: #6b7280; --t-accent: #2563eb; --t-accent-hover: #1d4ed8; --t-border: #e5e7eb; --t-sidebar-bg: #111827; --t-sidebar-text: #e5e7eb; --t-sidebar-active: #1e40af; --t-header-bg: #ffffff; --t-header-text: #111827; --t-btn-text: #ffffff; --t-input-bg: #ffffff; --t-input-border: #d1d5db; --t-input-focus: #2563eb; --t-tag-bg: #eff6ff; --t-tag-text: #1d4ed8; --t-success: #16a34a; --t-warn: #d97706; --t-danger: #dc2626; --t-info: #0284c7; --t-table-header: #f3f4f6; --t-table-row-alt: #f9fafb; --t-shadow: rgba(0, 0, 0, 0.06); --t-radius: 8px; --t-font: 'Inter', sans-serif; --t-font-heading: 'Inter', sans-serif; } /* 1. ARCTIC — clean blue & white corporate */ [data-theme="arctic"] { --t-bg: #f0f5ff; --t-surface: #ffffff; --t-surface2: #e8efff; --t-text: #0f172a; --t-muted: #64748b; --t-accent: #2563eb; --t-accent-hover: #1d4ed8; --t-border: #dbeafe; --t-sidebar-bg: #1e3a8a; --t-sidebar-text: #e0eaff; --t-sidebar-active: #2563eb; --t-header-bg: #ffffff; --t-header-text: #0f172a; --t-btn-text: #ffffff; --t-input-bg: #ffffff; --t-input-border: #93c5fd; --t-input-focus: #2563eb; --t-tag-bg: #eff6ff; --t-tag-text: #1d4ed8; --t-success: #16a34a; --t-warn: #d97706; --t-danger: #dc2626; --t-info: #0284c7; --t-table-header: #e8efff; --t-table-row-alt: #f5f8ff; --t-shadow: rgba(37, 99, 235, 0.08); --t-radius: 10px; --t-font: 'Inter', sans-serif; --t-font-heading: 'Inter', sans-serif; } /* 2. OBSIDIAN — dark purple on near-black */ [data-theme="obsidian"] { --t-bg: #0a0a0a; --t-surface: #141414; --t-surface2: #1e1e1e; --t-text: #e8e8e8; --t-muted: #6b7280; --t-accent: #a78bfa; --t-accent-hover: #7c3aed; --t-border: #2a2a2a; --t-sidebar-bg: #111111; --t-sidebar-text: #d4d4d8; --t-sidebar-active: #4c1d95; --t-header-bg: #111111; --t-header-text: #e8e8e8; --t-btn-text: #0a0a0a; --t-input-bg: #1e1e1e; --t-input-border: #3f3f46; --t-input-focus: #a78bfa; --t-tag-bg: #2d1b69; --t-tag-text: #c4b5fd; --t-success: #4ade80; --t-warn: #fbbf24; --t-danger: #f87171; --t-info: #38bdf8; --t-table-header: #1e1e1e; --t-table-row-alt: #161616; --t-shadow: rgba(167, 139, 250, 0.08); --t-radius: 10px; --t-font: 'Space Grotesk', sans-serif; --t-font-heading: 'Space Grotesk', sans-serif; } /* 3. SAGE — forest green, calm */ [data-theme="sage"] { --t-bg: #f4f7f5; --t-surface: #ffffff; --t-surface2: #e8f0eb; --t-text: #1c2e22; --t-muted: #5a7562; --t-accent: #3d6b4f; --t-accent-hover: #2e5a3f; --t-border: #c8ddd0; --t-sidebar-bg: #2e5a3f; --t-sidebar-text: #d0e8d8; --t-sidebar-active: #3d6b4f; --t-header-bg: #ffffff; --t-header-text: #1c2e22; --t-btn-text: #ffffff; --t-input-bg: #ffffff; --t-input-border: #a7c9b5; --t-input-focus: #3d6b4f; --t-tag-bg: #dcfce7; --t-tag-text: #166534; --t-success: #16a34a; --t-warn: #ca8a04; --t-danger: #dc2626; --t-info: #0891b2; --t-table-header: #e8f0eb; --t-table-row-alt: #f4f7f5; --t-shadow: rgba(61, 107, 79, 0.08); --t-radius: 10px; --t-font: 'DM Sans', sans-serif; --t-font-heading: 'DM Sans', sans-serif; } /* 4. EMBER — warm amber on cream */ [data-theme="ember"] { --t-bg: #fdf8f0; --t-surface: #ffffff; --t-surface2: #fef3e2; --t-text: #1c1206; --t-muted: #78583a; --t-accent: #b45309; --t-accent-hover: #92400e; --t-border: #fed7aa; --t-sidebar-bg: #7c2d12; --t-sidebar-text: #fde8d0; --t-sidebar-active: #b45309; --t-header-bg: #ffffff; --t-header-text: #1c1206; --t-btn-text: #ffffff; --t-input-bg: #ffffff; --t-input-border: #fdba74; --t-input-focus: #b45309; --t-tag-bg: #fff7ed; --t-tag-text: #c2410c; --t-success: #15803d; --t-warn: #d97706; --t-danger: #dc2626; --t-info: #0284c7; --t-table-header: #fef3e2; --t-table-row-alt: #fdf8f0; --t-shadow: rgba(180, 83, 9, 0.08); --t-radius: 10px; --t-font: 'Lato', sans-serif; --t-font-heading: 'Lato', sans-serif; } /* 5. COSMIC — deep-space dark */ [data-theme="cosmic"] { --t-bg: #0d0418; --t-surface: #130627; --t-surface2: #1a0a34; --t-text: #f0e6ff; --t-muted: #9d7fd4; --t-accent: #c026d3; --t-accent-hover: #a21caf; --t-border: #2d1254; --t-sidebar-bg: #0a031a; --t-sidebar-text: #e9d5ff; --t-sidebar-active: #6b21a8; --t-header-bg: #0d0418; --t-header-text: #f0e6ff; --t-btn-text: #ffffff; --t-input-bg: #1a0a34; --t-input-border: #4a1272; --t-input-focus: #c026d3; --t-tag-bg: #4a1272; --t-tag-text: #e9d5ff; --t-success: #4ade80; --t-warn: #fbbf24; --t-danger: #f87171; --t-info: #38bdf8; --t-table-header: #1a0a34; --t-table-row-alt: #130627; --t-shadow: rgba(192, 38, 211, 0.1); --t-radius: 10px; --t-font: 'Syne', sans-serif; --t-font-heading: 'Syne', sans-serif; } /* 6. SLATE — neutral grey, no-distraction */ [data-theme="slate"] { --t-bg: #f8fafc; --t-surface: #ffffff; --t-surface2: #f1f5f9; --t-text: #0f172a; --t-muted: #64748b; --t-accent: #475569; --t-accent-hover: #334155; --t-border: #e2e8f0; --t-sidebar-bg: #1e293b; --t-sidebar-text: #cbd5e1; --t-sidebar-active: #334155; --t-header-bg: #ffffff; --t-header-text: #0f172a; --t-btn-text: #ffffff; --t-input-bg: #ffffff; --t-input-border: #cbd5e1; --t-input-focus: #475569; --t-tag-bg: #f1f5f9; --t-tag-text: #475569; --t-success: #16a34a; --t-warn: #d97706; --t-danger: #dc2626; --t-info: #0284c7; --t-table-header: #f1f5f9; --t-table-row-alt: #f8fafc; --t-shadow: rgba(15, 23, 42, 0.06); --t-radius: 8px; --t-font: 'DM Sans', sans-serif; --t-font-heading: 'DM Sans', sans-serif; } /* 7. ROSE — bold red-rose on blush */ [data-theme="rose"] { --t-bg: #fff1f4; --t-surface: #ffffff; --t-surface2: #ffe4ea; --t-text: #1f0510; --t-muted: #9f6072; --t-accent: #e11d48; --t-accent-hover: #be123c; --t-border: #fecdd3; --t-sidebar-bg: #881337; --t-sidebar-text: #ffe4ea; --t-sidebar-active: #be123c; --t-header-bg: #ffffff; --t-header-text: #1f0510; --t-btn-text: #ffffff; --t-input-bg: #ffffff; --t-input-border: #fda4af; --t-input-focus: #e11d48; --t-tag-bg: #fff1f2; --t-tag-text: #e11d48; --t-success: #16a34a; --t-warn: #d97706; --t-danger: #9f1239; --t-info: #0284c7; --t-table-header: #ffe4ea; --t-table-row-alt: #fff1f4; --t-shadow: rgba(225, 29, 72, 0.08); --t-radius: 12px; --t-font: 'Inter', sans-serif; --t-font-heading: 'Inter', sans-serif; }