/*
 * Modern Faceted Search - CSS Variables
 * Design tokens for the Virtuoso Faceted Browser
 * Merges with existing variables.css for backward compatibility
 */

:root {
  /* Typography */
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Primary Colors */
  --primary-color: #0d6efd;
  --indigo-700: #4338ca;

  /* Neutral Colors (Slate Scale) */
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;

  /* Semantic Colors */
  --background-color: #f8fafc;
  --white-color: #ffffff;
  --text-color: #1e293b;

  /* Success Colors (Green) */
  --green-600: #16a34a;
  --green-500: #22c55e;

  /* Blue Colors */
  --blue-500: #3b82f6;
  --blue-600: #2563eb;

  /* Amber/Yellow Colors */
  --amber-500: #f59e0b;
  --amber-600: #d97706;

  /* Purple Colors */
  --purple-500: #a855f7;
  --purple-600: #9333ea;

  /* Red Colors */
  --red-500: #ef4444;
  --red-600: #dc2626;

  /* Primary Color Scale */
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* Spacing (8px base) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */

  /* Layout heights — overridden dynamically by JS */
  --header-h: 64px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* Z-index layers */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 1000;
  --z-modal: 1100;
  --z-popover: 1200;
  --z-tooltip: 3000;

  /* Color scheme indicator for system preference */
  color-scheme: light dark;
}

/* ---------- Dark Mode Theme ---------- */
[data-theme="dark"] {
  /* Background and surface colors */
  --background-color: #0f172a;
  --white-color: #1e293b;
  --text-color: #e2e8f0;

  /* Slate scale inverted */
  --slate-900: #f8fafc;
  --slate-800: #f1f5f9;
  --slate-700: #e2e8f0;
  --slate-600: #cbd5e1;
  --slate-500: #94a3b8;
  --slate-400: #64748b;
  --slate-300: #475569;
  --slate-200: #334155;
  --slate-100: #1e293b;
  --slate-50: #0f172a;

  /* Primary colors adjusted for dark mode */
  --primary-color: #3b82f6;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --indigo-700: #6366f1;

  /* Shadows for dark mode */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);

  /* Success colors adjusted */
  --green-500: #4ade80;
  --green-600: #22c55e;

  /* Additional dark mode semantic colors */
  --blue-50: #1e3a5f;
  --blue-300: #60a5fa;
  --blue-400: #3b82f6;
  --green-50: #14532d;
  --green-300: #4ade80;
  --green-400: #22c55e;
  --amber-50: #451a03;
  --amber-300: #fbbf24;
  --amber-400: #f59e0b;
  --amber-700: #fbbf24;
  --purple-50: #3b0764;
  --purple-300: #c084fc;
  --red-50: #450a0a;
  --red-100: #7f1d1d;
  --red-300: #f87171;
  --red-600: #ef4444;
}

/* System preference: auto dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Background and surface colors */
    --background-color: #0f172a;
    --white-color: #1e293b;
    --text-color: #e2e8f0;

    /* Slate scale inverted */
    --slate-900: #f8fafc;
    --slate-800: #f1f5f9;
    --slate-700: #e2e8f0;
    --slate-600: #cbd5e1;
    --slate-500: #94a3b8;
    --slate-400: #64748b;
    --slate-300: #475569;
    --slate-200: #334155;
    --slate-100: #1e293b;
    --slate-50: #0f172a;

    /* Primary colors adjusted for dark mode */
    --primary-color: #3b82f6;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --indigo-700: #6366f1;

    /* Shadows for dark mode */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);

    /* Success colors adjusted */
    --green-500: #4ade80;
    --green-600: #22c55e;

    /* Additional dark mode semantic colors */
    --blue-50: #1e3a5f;
    --blue-300: #60a5fa;
    --blue-400: #3b82f6;
    --green-50: #14532d;
    --green-300: #4ade80;
    --green-400: #22c55e;
    --amber-50: #451a03;
    --amber-300: #fbbf24;
    --amber-400: #f59e0b;
    --amber-700: #fbbf24;
    --purple-50: #3b0764;
    --purple-300: #c084fc;
    --red-50: #450a0a;
    --red-100: #7f1d1d;
    --red-300: #f87171;
    --red-600: #ef4444;
  }
}