/* ══════════════════════════════════════════════════════════════════════════
   AVA - Accident Verification Authority
   Design System Variables
   ══════════════════════════════════════════════════════════════════════════ */

:root {
   /* ═══════════════════════════════════════════════════════════════════════
       Primary Colors - Based on AVA Logo (Purple & Red)
       ═══════════════════════════════════════════════════════════════════════ */
   --primary-50: #FAF5FF;
   --primary-100: #E9D8FD;
   --primary-200: #D6BCFA;
   --primary-300: #B794F4;
   --primary-400: #9F7AEA;
   --primary-500: #805AD5;
   --primary-600: #6B46C1;
   /* Main Brand Purple */
   --primary-700: #553C9A;
   --primary-800: #44337A;
   --primary-900: #322659;

   /* Secondary Colors - Red Accent */
   --secondary-50: #FFF5F5;
   --secondary-100: #FED7D7;
   --secondary-200: #FEB2B2;
   --secondary-300: #FC8181;
   --secondary-400: #F56565;
   --secondary-500: #E53E3E;
   /* Main Brand Red */
   --secondary-600: #C53030;
   --secondary-700: #9B2C2C;
   --secondary-800: #822727;
   --secondary-900: #63171B;

   /* ═══════════════════════════════════════════════════════════════════════
       Semantic Colors
       ═══════════════════════════════════════════════════════════════════════ */
   --success-50: #F0FFF4;
   --success-100: #C6F6D5;
   --success-500: #38A169;
   --success-600: #2F855A;
   --success-700: #276749;

   --warning-50: #FFFBEB;
   --warning-100: #FEF3C7;
   --warning-500: #D69E2E;
   --warning-600: #B7791F;
   --warning-700: #975A16;

   --danger-50: #FFF5F5;
   --danger-100: #FED7D7;
   --danger-500: #E53E3E;
   --danger-600: #C53030;
   --danger-700: #9B2C2C;

   --info-50: #EBF8FF;
   --info-100: #BEE3F8;
   --info-500: #3182CE;
   --info-600: #2B6CB0;
   --info-700: #2C5282;

   /* ═══════════════════════════════════════════════════════════════════════
       Neutral Colors
       ═══════════════════════════════════════════════════════════════════════ */
   --neutral-50: #F7FAFC;
   --neutral-100: #EDF2F7;
   --neutral-200: #E2E8F0;
   --neutral-300: #CBD5E0;
   --neutral-400: #A0AEC0;
   --neutral-500: #718096;
   --neutral-600: #4A5568;
   --neutral-700: #2D3748;
   --neutral-800: #1A202C;
   --neutral-900: #171923;

   /* ═══════════════════════════════════════════════════════════════════════
       Typography
       ═══════════════════════════════════════════════════════════════════════ */
   --font-family-primary: 'Prompt', 'Sarabun', 'Noto Sans Thai', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-family-mono: 'Fira Code', 'Consolas', monospace;

   /* Font Sizes */
   --font-size-xs: 0.75rem;
   /* 12px */
   --font-size-sm: 0.875rem;
   /* 14px - Primary Input Size */
   --font-size-base: 0.875rem;
   /* 14px - Changed from 16px */
   --font-size-lg: 1.125rem;
   /* 18px - Section Titles */
   --font-size-xl: 1.25rem;
   /* 20px */
   --font-size-2xl: 1.5rem;
   /* 24px */
   --font-size-3xl: 1.875rem;
   /* 30px */
   --font-size-4xl: 2.25rem;
   /* 36px */

   /* Font Weights */
   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;

   /* Line Heights */
   --line-height-tight: 1.25;
   --line-height-normal: 1.5;
   --line-height-relaxed: 1.75;

   /* ═══════════════════════════════════════════════════════════════════════
       Spacing System (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 */
   --space-16: 4rem;
   /* 64px */
   --space-20: 5rem;
   /* 80px */

   /* ═══════════════════════════════════════════════════════════════════════
       Border Radius
       ═══════════════════════════════════════════════════════════════════════ */
   --radius-sm: 0.25rem;
   /* 4px */
   --radius-md: 0.375rem;
   /* 6px */
   --radius-lg: 0.5rem;
   /* 8px */
   --radius-xl: 0.75rem;
   /* 12px */
   --radius-2xl: 1rem;
   /* 16px */
   --radius-full: 9999px;

   /* ═══════════════════════════════════════════════════════════════════════
       Shadows
       ═══════════════════════════════════════════════════════════════════════ */
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
   --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
   --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
   --shadow-glow-primary: 0 0 20px rgba(107, 70, 193, 0.3);
   --shadow-glow-secondary: 0 0 20px rgba(229, 62, 62, 0.3);

   /* ═══════════════════════════════════════════════════════════════════════
       Z-Index Scale
       ═══════════════════════════════════════════════════════════════════════ */
   --z-dropdown: 100;
   --z-sticky: 200;
   --z-fixed: 300;
   --z-modal-backdrop: 400;
   --z-modal: 500;
   --z-popover: 600;
   --z-tooltip: 700;
   --z-toast: 800;

   /* ═══════════════════════════════════════════════════════════════════════
       Transitions
       ═══════════════════════════════════════════════════════════════════════ */
   --transition-fast: 150ms ease;
   --transition-normal: 250ms ease;
   --transition-slow: 350ms ease;

   /* ═══════════════════════════════════════════════════════════════════════
       Layout
       ═══════════════════════════════════════════════════════════════════════ */
   --sidebar-width: 260px;
   --sidebar-collapsed-width: 70px;
   --navbar-height: 64px;
   --container-max-width: 1400px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dark Mode Variables (Future Enhancement)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
   --bg-primary: var(--neutral-900);
   --bg-secondary: var(--neutral-800);
   --bg-tertiary: var(--neutral-700);
   --text-primary: var(--neutral-50);
   --text-secondary: var(--neutral-300);
   --border-color: var(--neutral-600);
}