/* ── Dark theme (default) ──────────────────────────────────────── */
/* Màu sắc lấy trực tiếp từ template glassmorphism:
   card bg: rgba(16,18,27,0.4), border: rgba(113,119,144,0.25) */
[data-theme="dark"] {
  --theme-bg-color:      rgba(16, 18, 27, 0.4);
  --content-bg:          rgb(146 151 179 / 13%);
  --hover-menu-bg:       rgba(12, 15, 25, 0.3);
  --inactive-color:      rgb(113 119 144 / 78%);
  --dropdown-bg:         #21242d;

  --bg-primary:          #0c0e1a;
  --bg-secondary:        #111827;
  --bg-card:             rgba(16, 18, 27, 0.4);
  --bg-card-hover:       rgba(16, 18, 27, 0.6);
  --bg-input:            rgba(12, 15, 25, 0.3);
  --bg-input-focus:      rgba(20, 22, 43, 0.7);

  --border-color:        rgba(113, 119, 144, 0.25);
  --border-focus:        rgba(58, 109, 240, 0.6);
  --border-glow:         rgba(58, 109, 240, 0.3);

  --text-primary:        #f9fafb;
  --text-secondary:      rgb(113 119 144 / 78%);
  --text-muted:          rgb(113 119 144 / 40%);
  --text-accent:         #3a6df0;

  /* Accent colors từ template */
  --accent-blue:         #3a6df0;
  --accent-blue-bright:  #6b99f7;
  --accent-green:        #3bf083;
  --accent-red:          #f96057;
  --accent-yellow:       #f8ce52;
  --accent-purple:       #c75deb;
  --accent-orange:       #f6ad55;

  --glass-blur:          blur(20px);
  --glass-saturate:      saturate(1.8);
  --shadow-card:         0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.05);
  --shadow-hover:        0 12px 48px rgba(58, 109, 240, 0.15), 0 0 0 1px rgba(58, 109, 240, 0.2);
  --shadow-button:       -1px 3px 8px -1px rgba(0, 0, 0, 0.2);

  --badge-in-range-bg:   rgba(59, 240, 131, 0.12);
  --badge-out-range-bg:  rgba(249, 96, 87, 0.12);
  --badge-neutral-bg:    rgba(58, 109, 240, 0.15);

  --health-good:         #3bf083;
  --health-warning:      #f8ce52;
  --health-danger:       #f96057;
  --health-bar-bg:       rgba(113, 119, 144, 0.2);

  --header-bg:           rgba(16, 18, 27, 0.7);
  --table-stripe:        rgba(255, 255, 255, 0.02);
  --table-hover:         rgba(16, 18, 27, 0.5);
  --divider:             rgba(113, 119, 144, 0.15);

  --scrollbar-bg:        rgb(1 2 3 / 40%);
  --scrollbar-track:     rgba(255, 255, 255, 0.02);
  --scrollbar-thumb:     rgb(1 2 3 / 40%);

  --dot-color:           rgba(148, 163, 184, 0.09);
}

/* ── Light theme ────────────────────────────────────────────────── */
/* Template light: rgba(255,255,255,0.31) bg, rgba(255,255,255,0.35) border
   Light mode overlay: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.45))
   + backdrop-filter: saturate(3) */
[data-theme="light"] {
  --theme-bg-color:      rgb(255 255 255 / 31%);
  --content-bg:          rgba(255, 255, 255, 0.45);
  --hover-menu-bg:       rgba(255, 255, 255, 0.35);
  --inactive-color:      #333333;
  --dropdown-bg:         #f7f7f7;

  --bg-primary:          #dde3f0;
  --bg-secondary:        #e8edf8;
  --bg-card:             rgb(255 255 255 / 31%);
  --bg-card-hover:       rgba(255, 255, 255, 0.72);
  --bg-input:            rgba(255, 255, 255, 0.5);
  --bg-input-focus:      rgba(255, 255, 255, 0.95);

  --border-color:        rgba(255, 255, 255, 0.35);
  --border-focus:        rgba(58, 109, 240, 0.5);
  --border-glow:         rgba(58, 109, 240, 0.25);

  --text-primary:        #3c3a3a;
  --text-secondary:      #555560;
  --text-muted:          #999ba5;
  --text-accent:         #3a6df0;

  --accent-blue:         #3a6df0;
  --accent-blue-bright:  #2b6cb0;
  --accent-green:        #38a169;
  --accent-red:          #e53e3e;
  --accent-yellow:       #d69e2e;
  --accent-purple:       #6b46c1;
  --accent-orange:       #c05621;

  --glass-blur:          blur(20px);
  --glass-saturate:      saturate(3);
  --shadow-card:         0 4px 24px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255,255,255,0.8);
  --shadow-hover:        0 8px 40px rgba(58, 109, 240, 0.12), 0 0 0 1px rgba(58, 109, 240, 0.15);
  --shadow-button:       -1px 3px 8px -1px rgba(0, 0, 0, 0.12);

  --badge-in-range-bg:   rgba(56, 161, 105, 0.12);
  --badge-out-range-bg:  rgba(229, 62, 62, 0.1);
  --badge-neutral-bg:    rgba(58, 109, 240, 0.1);

  --health-good:         #38a169;
  --health-warning:      #d69e2e;
  --health-danger:       #e53e3e;
  --health-bar-bg:       rgba(0, 0, 0, 0.06);

  --header-bg:           rgba(255, 255, 255, 0.5);
  --table-stripe:        rgba(0, 0, 0, 0.015);
  --table-hover:         rgba(255, 255, 255, 0.6);
  --divider:             rgba(0, 0, 0, 0.06);

  --scrollbar-bg:        rgb(255 253 253 / 57%);
  --scrollbar-track:     rgba(0, 0, 0, 0.02);
  --scrollbar-thumb:     rgb(255 253 253 / 57%);

  --dot-color:           rgba(148, 163, 184, 0.25);
}

/* ── Typography & design tokens ─────────────────────────────────── */
:root {
  /* Poppins (font từ template glassmorphism) + Inter + system fallback */
  --font-sans:  'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;

  /* Template dùng border-radius 14px cho cards và 20px cho buttons */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --transition-fast:   0.2s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.5s ease;
}