/* ═══════════════════════════════════════════════════════════════ ReconAssure – Theme Definitions CSS custom properties keyed by [data-theme] on . Default (no attribute) = light. ═══════════════════════════════════════════════════════════════ */ /* ── Light (default) ──────────────────────────────────────── */ :root, [data-theme="light"] { --color-bg: #f0f4f8; --color-surface: #ffffff; --color-surface-2: #f8fafc; --color-border: #e2e8f0; --color-border-strong: #cbd5e1; --color-primary: #2563eb; --color-primary-hover: #1d4ed8; --color-primary-active: #1e40af; --color-primary-subtle: #dbeafe; --color-primary-text: #ffffff; --color-text: #1e293b; --color-text-muted: #64748b; --color-text-subtle: #94a3b8; --color-success: #16a34a; --color-success-subtle: #dcfce7; --color-success-text: #166534; --color-warning: #d97706; --color-warning-subtle: #fef3c7; --color-warning-text: #92400e; --color-danger: #dc2626; --color-danger-subtle: #fee2e2; --color-danger-text: #991b1b; --color-info: #0284c7; --color-info-subtle: #e0f2fe; --color-info-text: #0c4a6e; --sidebar-bg: #0f172a; --sidebar-text: #94a3b8; --sidebar-text-hover: #e2e8f0; --sidebar-active: #60a5fa; --sidebar-active-bg: rgba(96, 165, 250, 0.12); --sidebar-hover-bg: rgba(255, 255, 255, 0.06); --sidebar-border: rgba(255, 255, 255, 0.08); --sidebar-logo-text: #f1f5f9; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --color-wallet-badge-bg: #dbeafe; --color-wallet-badge-text: #1d4ed8; --color-bank-badge-bg: #d1fae5; --color-bank-badge-text: #065f46; --color-positive: #16a34a; --color-negative: #dc2626; } /* ── Dark ─────────────────────────────────────────────────── */ [data-theme="dark"] { --color-bg: #0f1117; --color-surface: #1a1d27; --color-surface-2: #1e2130; --color-border: #2d3748; --color-border-strong: #4a5568; --color-primary: #60a5fa; --color-primary-hover: #93c5fd; --color-primary-active: #3b82f6; --color-primary-subtle: rgba(96, 165, 250, 0.15); --color-primary-text: #0f1117; --color-text: #e2e8f0; --color-text-muted: #94a3b8; --color-text-subtle: #64748b; --color-success: #4ade80; --color-success-subtle: rgba(74, 222, 128, 0.12); --color-success-text: #4ade80; --color-warning: #fbbf24; --color-warning-subtle: rgba(251, 191, 36, 0.12); --color-warning-text: #fbbf24; --color-danger: #f87171; --color-danger-subtle: rgba(248, 113, 113, 0.12); --color-danger-text: #f87171; --color-info: #38bdf8; --color-info-subtle: rgba(56, 189, 248, 0.12); --color-info-text: #38bdf8; --sidebar-bg: #111827; --sidebar-text: #9ca3af; --sidebar-text-hover: #f3f4f6; --sidebar-active: #60a5fa; --sidebar-active-bg: rgba(96, 165, 250, 0.12); --sidebar-hover-bg: rgba(255, 255, 255, 0.05); --sidebar-border: rgba(255, 255, 255, 0.06); --sidebar-logo-text: #f9fafb; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3); --color-wallet-badge-bg: rgba(29, 78, 216, 0.25); --color-wallet-badge-text: #93c5fd; --color-bank-badge-bg: rgba(6, 95, 70, 0.25); --color-bank-badge-text: #6ee7b7; --color-positive: #4ade80; --color-negative: #f87171; } /* ── Colorful ─────────────────────────────────────────────── */ [data-theme="colorful"] { --color-bg: #fdf4ff; --color-surface: #ffffff; --color-surface-2: #faf5ff; --color-border: #e9d5ff; --color-border-strong: #d8b4fe; --color-primary: #7c3aed; --color-primary-hover: #6d28d9; --color-primary-active: #5b21b6; --color-primary-subtle: #ede9fe; --color-primary-text: #ffffff; --color-text: #1e1b4b; --color-text-muted: #5b21b6; --color-text-subtle: #8b5cf6; --color-success: #059669; --color-success-subtle: #d1fae5; --color-success-text: #065f46; --color-warning: #d97706; --color-warning-subtle: #fef3c7; --color-warning-text: #78350f; --color-danger: #dc2626; --color-danger-subtle: #fee2e2; --color-danger-text: #7f1d1d; --color-info: #0891b2; --color-info-subtle: #cffafe; --color-info-text: #164e63; --sidebar-bg: #1e1b4b; --sidebar-text: #a5b4fc; --sidebar-text-hover: #e0e7ff; --sidebar-active: #a78bfa; --sidebar-active-bg: rgba(167, 139, 250, 0.2); --sidebar-hover-bg: rgba(255, 255, 255, 0.08); --sidebar-border: rgba(167, 139, 250, 0.2); --sidebar-logo-text: #e0e7ff; --shadow-sm: 0 1px 2px 0 rgba(109, 40, 217, 0.08); --shadow-md: 0 4px 6px -1px rgba(109, 40, 217, 0.12), 0 2px 4px -1px rgba(109, 40, 217, 0.08); --shadow-lg: 0 10px 15px -3px rgba(109, 40, 217, 0.14), 0 4px 6px -2px rgba(109, 40, 217, 0.08); --shadow-xl: 0 20px 25px -5px rgba(109, 40, 217, 0.16), 0 10px 10px -5px rgba(109, 40, 217, 0.1); --color-wallet-badge-bg: #ede9fe; --color-wallet-badge-text: #5b21b6; --color-bank-badge-bg: #d1fae5; --color-bank-badge-text: #065f46; --color-positive: #059669; --color-negative: #dc2626; } /* ── Neutral ──────────────────────────────────────────────── */ [data-theme="neutral"] { --color-bg: #f5f0eb; --color-surface: #fdfcfb; --color-surface-2: #f0ebe5; --color-border: #d6cfc8; --color-border-strong: #a8a097; --color-primary: #57534e; --color-primary-hover: #44403c; --color-primary-active: #292524; --color-primary-subtle: #e7e5e4; --color-primary-text: #ffffff; --color-text: #1c1917; --color-text-muted: #78716c; --color-text-subtle: #a8a29e; --color-success: #4d7c0f; --color-success-subtle: #ecfccb; --color-success-text: #365314; --color-warning: #b45309; --color-warning-subtle: #fef3c7; --color-warning-text: #78350f; --color-danger: #991b1b; --color-danger-subtle: #fee2e2; --color-danger-text: #7f1d1d; --color-info: #1e40af; --color-info-subtle: #dbeafe; --color-info-text: #1e3a8a; --sidebar-bg: #292524; --sidebar-text: #a8a29e; --sidebar-text-hover: #e7e5e4; --sidebar-active: #d6d3d1; --sidebar-active-bg: rgba(214, 211, 209, 0.15); --sidebar-hover-bg: rgba(255, 255, 255, 0.06); --sidebar-border: rgba(255, 255, 255, 0.08); --sidebar-logo-text: #fafaf9; --shadow-sm: 0 1px 2px 0 rgba(28, 25, 23, 0.06); --shadow-md: 0 4px 6px -1px rgba(28, 25, 23, 0.08), 0 2px 4px -1px rgba(28, 25, 23, 0.06); --shadow-lg: 0 10px 15px -3px rgba(28, 25, 23, 0.1), 0 4px 6px -2px rgba(28, 25, 23, 0.06); --shadow-xl: 0 20px 25px -5px rgba(28, 25, 23, 0.12), 0 10px 10px -5px rgba(28, 25, 23, 0.06); --color-wallet-badge-bg: #e7e5e4; --color-wallet-badge-text: #44403c; --color-bank-badge-bg: #ecfccb; --color-bank-badge-text: #365314; --color-positive: #4d7c0f; --color-negative: #991b1b; }