/*
 * Färgpalett för ljust och mörkt tema.
 * Komponenterna i style.css använder enbart dessa variabler, så ett nytt tema
 * kräver bara ett nytt [data-theme]-block här.
 */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Ytor */
  --color-bg: #f1f5f9;
  --color-surface: #ffffff;
  --color-surface-muted: #f8fafc;
  --color-surface-hover: #f1f5f9;
  --color-surface-sunken: #e2e8f0;
  --color-row-alt: #f1f5f9;

  /* Kanter */
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;

  /* Text */
  --color-text: #0f172a;
  --color-text-secondary: #334155;
  --color-text-muted: #475569;
  --color-text-subtle: #64748b;
  --color-text-faint: #94a3b8;

  /* Accent */
  --color-primary: #2563eb;
  --color-primary-strong: #1d4ed8;
  --color-primary-soft: #eff6ff;
  --color-primary-border: #3b82f6;
  --color-on-primary: #ffffff;
  --gradient-stat-value: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  --gradient-stat-box: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);

  /* Inverterad knapp (t.ex. Dev-meny) */
  --color-inverse-bg: #0f172a;
  --color-inverse-bg-hover: #1e293b;
  --color-inverse-text: #ffffff;

  /* Status och kategorier */
  --color-success: #16a34a;
  --color-success-soft: #dcfce7;
  --color-danger: #dc2626;
  --color-danger-soft: #fee2e2;
  --color-female: #db2777;
  --color-female-soft: #fce7f3;
  --color-male: #2563eb;
  --color-male-soft: #dbeafe;
  --color-vehicle: #0369a1;
  --color-vehicle-soft: #e0f2fe;

  /* Skuggor och overlay */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 6px 16px rgba(37, 99, 235, 0.08);
  --color-overlay: rgba(15, 23, 42, 0.6);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0b1220;
  --color-surface: #131c2e;
  --color-surface-muted: #182337;
  --color-surface-hover: #1f2b42;
  --color-surface-sunken: #1f2b42;
  --color-row-alt: #172135;

  --color-border: #26324a;
  --color-border-strong: #35445f;

  --color-text: #e2e8f0;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #b4c0d0;
  --color-text-subtle: #94a3b8;
  --color-text-faint: #7c8aa0;

  --color-primary: #3b82f6;
  --color-primary-strong: #93c5fd;
  --color-primary-soft: rgba(59, 130, 246, 0.15);
  --color-primary-border: #60a5fa;
  --color-on-primary: #ffffff;
  --gradient-stat-value: linear-gradient(135deg, #60a5fa 0%, #a5c8ff 100%);
  --gradient-stat-box: linear-gradient(135deg, #131c2e 0%, #182337 100%);

  --color-inverse-bg: #e2e8f0;
  --color-inverse-bg-hover: #cbd5e1;
  --color-inverse-text: #0f172a;

  --color-success: #4ade80;
  --color-success-soft: rgba(34, 197, 94, 0.15);
  --color-danger: #f87171;
  --color-danger-soft: rgba(239, 68, 68, 0.15);
  --color-female: #f472b6;
  --color-female-soft: rgba(236, 72, 153, 0.15);
  --color-male: #60a5fa;
  --color-male-soft: rgba(59, 130, 246, 0.15);
  --color-vehicle: #38bdf8;
  --color-vehicle-soft: rgba(14, 165, 233, 0.15);

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.45);
  --color-overlay: rgba(2, 6, 23, 0.7);
}