/* ==========================================================================
   variables.css — global design tokens (colors, type, spacing, radius, shadow)
   Light theme is the default; dark values are applied via [data-bs-theme="dark"].
   ========================================================================== */
:root {
  /* Brand + semantic colors */
  --primary: #3457d5;
  --primary-dark: color-mix(in srgb, var(--primary) 82%, black);
  --primary-soft: color-mix(in srgb, var(--primary) 12%, transparent);
  --secondary: #64748b;
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #dc2626;
  --info: #0ea5e9;

  /* Surfaces and text */
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #1e293b;
  --muted: #64748b;
  --border: #e2e8f0;
  --sidebar-bg: #ffffff;

  /* Text-safe status tones (meet contrast on their soft background) */
  --tone-success: #15803d;
  --tone-warning: #b45309;
  --tone-danger: #b91c1c;
  --tone-info: #0369a1;
  --tone-primary: color-mix(in srgb, var(--primary) 82%, black);
  --tone-purple: #6d28d9;
  --tone-neutral: #475569;

  /* Typography */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9rem;
  --fs-lg: 1.05rem;
  --fs-xl: 1.35rem;
  --fs-2xl: 1.75rem;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* Radius */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

  /* Layout */
  --sidebar-width: 264px;
  --sidebar-collapsed: 76px;
  --topbar-height: 64px;
  --transition: 0.18s ease;

  /* Chart palette (read by charts.js) */
  --chart-1: #3457d5;
  --chart-2: #16a34a;
  --chart-3: #f59e0b;
  --chart-4: #dc2626;
  --chart-5: #0ea5e9;
  --chart-6: #8b5cf6;
}

[data-bs-theme="dark"] {
  --bg: #0f1526;
  --surface: #172036;
  --surface-2: #1c2745;
  --text: #e5eaf5;
  --muted: #9aa8c2;
  --border: #2a3656;
  --sidebar-bg: #131b30;
  --primary-soft: color-mix(in srgb, var(--primary) 22%, transparent);
  --tone-success: #4ade80;
  --tone-warning: #fbbf24;
  --tone-danger: #f87171;
  --tone-info: #38bdf8;
  --tone-primary: #93a8f5;
  --tone-purple: #c4b5fd;
  --tone-neutral: #cbd5e1;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}