/* ═══ SECTION 1: Custom Properties ═══ */
:root {
  --sidebar-w: 250px;
  --topbar-h: 56px;

  --bg-body: #f0f2f6;
  --bg-card: #ffffff;
  --bg-card-glass: rgba(255,255,255,0.72);
  --bg-input: #f8f9fb;
  --text-primary: #1a1d28;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --border-color: #e5e7ec;
  --border-light: #f0f1f5;

  --accent-start: #0d9488;
  --accent-end: #4f46e5;
  --accent-gradient: linear-gradient(135deg, #0d9488 0%, #4f46e5 100%);
  --accent-gradient-subtle: linear-gradient(135deg, rgba(13,148,136,0.12) 0%, rgba(79,70,229,0.12) 100%);

  --sidebar-bg: linear-gradient(180deg, #111827 0%, #1e293b 50%, #0f172a 100%);
  --sidebar-bg-solid: #111827;
  --sidebar-text: rgba(255,255,255,0.7);
  --sidebar-text-hover: #ffffff;
  --sidebar-active-bg: rgba(13,148,136,0.25);
  --sidebar-active-glow: rgba(13,148,136,0.5);

  --card-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
  --card-shadow-hover: 0 4px 8px rgba(0,0,0,0.08), 0 12px 28px rgba(0,0,0,0.06);
  --stat-card-border-gradient: linear-gradient(180deg, #0d9488, #4f46e5);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* legacy aliases for JS-generated markup */
  --navy: #1F3864;
  --navy-mid: #2F5496;

  /* glass effect */
  --glass-bg: rgba(255,255,255,0.65);
  --glass-border: rgba(255,255,255,0.5);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.06);

  /* brand gradient for sidebar */
  --brand-gradient: linear-gradient(135deg, #0d9488, #4f46e5);
}

/* ═══ SECTION 2: Dark Mode ═══ */
[data-theme="dark"] {
  --bg-body: #0f1117;
  --bg-card: #1a1d2b;
  --bg-card-glass: rgba(26,29,43,0.78);
  --bg-input: #242738;
  --text-primary: #e5e7eb;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --border-color: #2d3042;
  --border-light: #242738;

  --card-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.15);
  --card-shadow-hover: 0 4px 8px rgba(0,0,0,0.3), 0 12px 28px rgba(0,0,0,0.25);

  --glass-bg: rgba(26,29,43,0.72);
  --glass-border: rgba(255,255,255,0.06);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.2);
}