/* ExpenseTracker — color themes (toggle via data-et-theme on html) */

html {
  background-color: var(--et-bg);
}

html[data-et-theme="blue"],
html:not([data-et-theme]) {
  --et-bg: #f6f8fb;
  --et-surface: #ffffff;
  --et-surface-soft: #f8fafc;
  --et-text: #111827;
  --et-muted: #6b7280;
  --et-border: #e5e7eb;
  --et-primary: #2563eb;
  --et-primary-hover: #1d4ed8;
  --et-primary-soft: #eff6ff;
  --et-accent: #0ea5e9;
  --et-primary-shadow: rgba(37, 99, 235, 0.25);
  --et-danger: #dc2626;
  --et-danger-soft: #fef2f2;
  --et-success: #16a34a;
  --et-success-soft: #f0fdf4;
  --et-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --et-sidebar-surface: #ffffff;
  --et-sidebar-text: #111827;
  --et-sidebar-muted: #6b7280;
  --et-sidebar-border: #e5e7eb;
  --et-sidebar-soft: #f8fafc;
  --et-sidebar-footer-bg: #f8fafc;
  --et-sidebar-active-color: #2563eb;
  --et-sidebar-active-bg: #eff6ff;
  --et-sidebar-brand-icon-bg: #eff6ff;
  --et-sidebar-brand-icon-color: #2563eb;
  --et-metric-accent-bg: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
  --et-metric-accent-border: rgba(37, 99, 235, 0.35);
  --et-metric-accent-value: #2563eb;
  --et-metric-accent-label: #6b7280;
  --et-metric-accent-caption: #6b7280;
  --et-metric-accent-icon-bg: rgba(37, 99, 235, 0.12);
  --et-metric-accent-icon-color: #2563eb;
  --et-row-stripe: rgba(248, 250, 252, 0.6);
  --auth-gradient-start: #4338ca;
  --auth-gradient-mid: #7c3aed;
  --auth-gradient-end: #ec4899;
  --auth-btn-start: #7c3aed;
  --auth-btn-mid: #a855f7;
  --auth-btn-end: #f472b6;
  --auth-btn-shadow: rgba(124, 58, 237, 0.4);
  --auth-btn-shadow-hover: rgba(236, 72, 153, 0.45);
  --auth-glow-a: rgba(251, 146, 60, 0.55);
  --auth-glow-b: rgba(244, 114, 182, 0.55);
  --auth-warm-glow-a: rgba(249, 115, 22, 0.32);
  --auth-warm-glow-b: rgba(236, 72, 153, 0.38);
  --auth-warm-glow-c: rgba(250, 204, 21, 0.12);
  --auth-brand-icon-bg: rgba(255, 255, 255, 0.16);
  --auth-brand-icon-color: #ffffff;
  --auth-input-focus-border: rgba(255, 220, 190, 0.45);
  --auth-input-focus-ring: rgba(244, 114, 182, 0.35);
  --et-drawer-btn-background: #2563eb;
  --et-scrollbar-track: #f1f5f9;
  --et-scrollbar-thumb: rgba(37, 99, 235, 0.35);
  --et-scrollbar-thumb-hover: rgba(37, 99, 235, 0.55);
}

html[data-et-theme="green"] {
  --et-bg: #f3faf5;
  --et-surface: #ffffff;
  --et-surface-soft: #f0fdf4;
  --et-text: #14532d;
  --et-muted: #4b5563;
  --et-border: #d1fae5;
  --et-primary: #16a34a;
  --et-primary-hover: #15803d;
  --et-primary-soft: #f0fdf4;
  --et-accent: #22c55e;
  --et-primary-shadow: rgba(22, 163, 74, 0.25);
  --et-danger: #dc2626;
  --et-danger-soft: #fef2f2;
  --et-success: #15803d;
  --et-success-soft: #dcfce7;
  --et-font-family: Poppins, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --et-sidebar-surface: #ffffff;
  --et-sidebar-text: #14532d;
  --et-sidebar-muted: #4b5563;
  --et-sidebar-border: #d1fae5;
  --et-sidebar-soft: #f0fdf4;
  --et-sidebar-footer-bg: #f0fdf4;
  --et-sidebar-active-color: #16a34a;
  --et-sidebar-active-bg: #dcfce7;
  --et-sidebar-brand-icon-bg: #dcfce7;
  --et-sidebar-brand-icon-color: #16a34a;
  --et-metric-accent-bg: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  --et-metric-accent-border: rgba(22, 163, 74, 0.35);
  --et-metric-accent-value: #16a34a;
  --et-metric-accent-label: #4b5563;
  --et-metric-accent-caption: #4b5563;
  --et-metric-accent-icon-bg: rgba(22, 163, 74, 0.12);
  --et-metric-accent-icon-color: #16a34a;
  --et-row-stripe: rgba(240, 253, 244, 0.8);
  --auth-gradient-start: #14532d;
  --auth-gradient-mid: #16a34a;
  --auth-gradient-end: #eab308;
  --auth-btn-start: #15803d;
  --auth-btn-mid: #22c55e;
  --auth-btn-end: #facc15;
  --auth-btn-shadow: rgba(22, 163, 74, 0.38);
  --auth-btn-shadow-hover: rgba(234, 179, 8, 0.4);
  --auth-glow-a: rgba(250, 204, 21, 0.5);
  --auth-glow-b: rgba(34, 197, 94, 0.45);
  --auth-warm-glow-a: rgba(250, 204, 21, 0.28);
  --auth-warm-glow-b: rgba(34, 197, 94, 0.32);
  --auth-warm-glow-c: rgba(251, 146, 60, 0.14);
  --auth-brand-icon-bg: rgba(255, 255, 255, 0.16);
  --auth-brand-icon-color: #ffffff;
  --auth-input-focus-border: rgba(255, 235, 200, 0.42);
  --auth-input-focus-ring: rgba(250, 204, 21, 0.32);
  --et-drawer-btn-background: #16a34a;
  --et-scrollbar-track: #ecfdf5;
  --et-scrollbar-thumb: rgba(22, 163, 74, 0.35);
  --et-scrollbar-thumb-hover: rgba(22, 163, 74, 0.55);
}

html[data-et-theme="purple"] {
  --et-bg: #f5f3ff;
  --et-surface: #ffffff;
  --et-surface-soft: #faf5ff;
  --et-text: #1e1b4b;
  --et-muted: #6b7280;
  --et-border: #e9d5ff;
  --et-primary: #7c3aed;
  --et-primary-hover: #6d28d9;
  --et-primary-soft: #ede9fe;
  --et-accent: #a855f7;
  --et-primary-shadow: rgba(124, 58, 237, 0.28);
  --et-danger: #dc2626;
  --et-danger-soft: #fef2f2;
  --et-success: #16a34a;
  --et-success-soft: #f0fdf4;
  --et-font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --et-sidebar-surface: #1e1b4b;
  --et-sidebar-text: #f8fafc;
  --et-sidebar-muted: #c4b5fd;
  --et-sidebar-border: #312e81;
  --et-sidebar-soft: rgba(255, 255, 255, 0.06);
  --et-sidebar-footer-bg: #18163a;
  --et-sidebar-active-color: #ddd6fe;
  --et-sidebar-active-bg: rgba(124, 58, 237, 0.28);
  --et-sidebar-brand-icon-bg: rgba(124, 58, 237, 0.35);
  --et-sidebar-brand-icon-color: #ddd6fe;
  --et-metric-accent-bg: #7c3aed;
  --et-metric-accent-border: #7c3aed;
  --et-metric-accent-value: #ffffff;
  --et-metric-accent-label: rgba(255, 255, 255, 0.82);
  --et-metric-accent-caption: rgba(255, 255, 255, 0.65);
  --et-metric-accent-icon-bg: rgba(255, 255, 255, 0.15);
  --et-metric-accent-icon-color: #ffffff;
  --et-row-stripe: rgba(245, 243, 255, 0.85);
  --auth-gradient-start: #4c1d95;
  --auth-gradient-mid: #9333ea;
  --auth-gradient-end: #f472b6;
  --auth-btn-start: #7c3aed;
  --auth-btn-mid: #c026d3;
  --auth-btn-end: #fb7185;
  --auth-btn-shadow: rgba(124, 58, 237, 0.42);
  --auth-btn-shadow-hover: rgba(244, 114, 182, 0.48);
  --auth-glow-a: rgba(251, 146, 60, 0.6);
  --auth-glow-b: rgba(244, 114, 182, 0.58);
  --auth-warm-glow-a: rgba(249, 115, 22, 0.38);
  --auth-warm-glow-b: rgba(236, 72, 153, 0.42);
  --auth-warm-glow-c: rgba(250, 204, 21, 0.16);
  --auth-brand-icon-bg: rgba(255, 255, 255, 0.16);
  --auth-brand-icon-color: #ffffff;
  --auth-input-focus-border: rgba(255, 210, 190, 0.48);
  --auth-input-focus-ring: rgba(251, 146, 60, 0.32);
  --et-drawer-btn-background: linear-gradient(90deg, #7c3aed 0%, #6366f1 100%);
  --et-scrollbar-track: #ede9fe;
  --et-scrollbar-track-sidebar: #312e81;
  --et-scrollbar-thumb: rgba(124, 58, 237, 0.4);
  --et-scrollbar-thumb-hover: rgba(124, 58, 237, 0.6);
}