/* ============================================================
   LA SOURCE — Design System v2 (Teal + Dark mode)
   Loaded BEFORE style.css. Variables only — no component rules.
   ============================================================ */

:root,
[data-theme="light"] {
  /* Teal palette */
  --teal-50:  #f0fdfa;
  --teal-100: #ccfbf1;
  --teal-300: #5eead4;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-700: #0f766e;
  --teal-900: #0a3d40;

  /* Neutrals */
  --gray-50:  #f7fafa;
  --gray-100: #f1f5f5;
  --gray-200: #e6efef;
  --gray-300: #d6e2e3;
  --gray-400: #94a3a3;
  --gray-500: #647778;
  --gray-700: #2d4548;
  --gray-900: #0a3d40;

  /* Semantic colors */
  --blue-100: #dbeafe;  --blue-700: #1e40af;
  --green-100:#dcfce7;  --green-700:#166534;
  --amber-100:#fef3c7;  --amber-700:#92400e;
  --red-100:  #fee2e2;  --red-300: #fecaca;  --red-700: #b91c1c;

  /* Semantic aliases */
  --bg:           var(--gray-50);
  --surface:      #ffffff;
  --surface-2:    var(--gray-50);
  --border:       var(--gray-200);
  --border-light: var(--gray-100);
  --text:         var(--gray-900);
  --text-muted:   var(--gray-500);
  --primary:      var(--teal-600);
  --primary-hover:var(--teal-700);
  --primary-soft: var(--teal-100);
  --sidebar-bg:   var(--teal-900);
  --sidebar-text: #a7c4c5;
  --sidebar-text-hover: #ffffff;
  --sidebar-active-bg: rgba(13,148,136,.18);
  --sidebar-active-text: #5eead4;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  --gradient-hero:    linear-gradient(135deg, #0d9488 0%, #0a3d40 100%);

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(10,61,64,.06);
  --shadow:     0 2px 8px rgba(10,61,64,.06), 0 1px 2px rgba(10,61,64,.04);
  --shadow-md:  0 8px 24px rgba(10,61,64,.08);
  --shadow-lg:  0 20px 60px rgba(10,61,64,.15);
  --shadow-glow:0 4px 12px rgba(13,148,136,.35);
}

[data-theme="dark"] {
  --bg:           #0a1a1c;
  --surface:      #11272a;
  --surface-2:    #18353a;
  --border:       #1f4548;
  --border-light: #173336;
  --text:         #e5f5f6;
  --text-muted:   #80a3a5;
  --primary:      #14b8a6;
  --primary-hover:#5eead4;
  --primary-soft: #134e4a;
  --sidebar-bg:   #061e21;
  --sidebar-text: #80a3a5;
  --sidebar-text-hover: #e5f5f6;
  --sidebar-active-bg: rgba(20,184,166,.18);
  --sidebar-active-text: #5eead4;

  /* Status badges keep light bg but adjusted text for dark */
  --blue-100: #1e3a8a33;  --blue-700: #93c5fd;
  --green-100:#14532d33;  --green-700:#86efac;
  --amber-100:#78350f33;  --amber-700:#fcd34d;
  --red-100:  #7f1d1d33;  --red-300: #7f1d1d;  --red-700: #fca5a5;

  --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  --shadow:     0 2px 8px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md:  0 8px 24px rgba(0,0,0,.5);
  --shadow-lg:  0 20px 60px rgba(0,0,0,.6);
  --shadow-glow:0 4px 12px rgba(20,184,166,.45);
}

/* Spacing scale + non-theme tokens */
:root {
  --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;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 9999px;

  --transition: .18s ease;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, monospace;

  --sidebar-width: 240px;
  --topbar-height: 60px;
  --tabbar-height: 72px;
}

/* Smooth transitions on theme switch */
html { transition: background-color .2s ease; }
body, .card, .btn, input, textarea, select, .modal-content,
.sidebar, .topbar, .alert, .badge, .form-control {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}