/* Tarqiya Design System Tokens - Official Safe Driving Platform */
:root {
  /* Brand Color Palette - Vibrant Royal Blue Palette from User Reference */
  --color-primary: #0D64DB;       /* Vivid Royal Blue */
  --color-primary-dark: #094EB0;  /* Deep Royal Blue */
  --color-primary-light: #2A7CF6; /* Bright Royal Accent */
  --color-main-blue: #0D64DB;     /* Main Interactive Blue */
  --color-main-blue-hover: #0852B8;
  --color-secondary-blue: #0074E8;
  --color-light-blue: #EEF5FF;
  --color-brand-gradient: linear-gradient(180deg, #1366E2 0%, #0672E5 100%);
  --color-brand-gradient-h: linear-gradient(135deg, #1366E2 0%, #0672E5 100%);
  --color-accent-teal: #2F8F83;
  --color-accent-teal-soft: #E6F5F3;
  
  /* Status Colors */
  --color-success: #3E8E6B;
  --color-success-soft: #E8F5EF;
  --color-warning: #C58A32;
  --color-warning-soft: #FCF4E7;
  --color-error: #B94A48;
  --color-error-soft: #FDEEEE;

  /* Surfaces and Neutrals */
  --color-bg: #F4F7FB;
  --color-surface: #FFFFFF;
  --color-surface-hover: #FAFBFC;
  --color-surface-elevated: #FFFFFF;
  --color-text-primary: #122133;
  --color-text-secondary: #5E7186;
  --color-text-muted: #8A9AA8;
  --color-border: #D7E1EC;
  --color-border-subtle: #E8EEF5;

  /* Shadows - Refined with brand tint */
  --shadow-sm: 0 1px 2px rgba(13, 100, 219, 0.05);
  --shadow-md: 0 4px 12px rgba(13, 100, 219, 0.08);
  --shadow-lg: 0 8px 24px rgba(13, 100, 219, 0.12);
  --shadow-xl: 0 16px 36px rgba(13, 100, 219, 0.16);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04);

  /* Border Radii - Moderate & Professional */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Typography */
  --font-arabic: 'Cairo', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-english: 'Inter', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family: var(--font-arabic);

  /* Spacing */
  --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;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index Hierarchy */
  --z-base: 1;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-modal-backdrop: 500;
  --z-modal: 600;
  --z-toast: 800;
  --z-ai-assistant: 900;
}

/* Dark Mode Tokens */
[data-theme="dark"] {
  --color-primary: #1E4F77;
  --color-primary-dark: #123450;
  --color-primary-light: #2D6A9C;
  --color-main-blue: #3B82F6;
  --color-main-blue-hover: #2563EB;
  --color-secondary-blue: #38BDF8;
  --color-light-blue: #13263C;
  --color-accent-teal: #34D399;
  --color-accent-teal-soft: #0E332B;

  --color-success: #4ADE80;
  --color-success-soft: #0F3822;
  --color-warning: #FBBF24;
  --color-warning-soft: #382A0F;
  --color-error: #F87171;
  --color-error-soft: #3B1616;

  --color-bg: #0C131A;
  --color-surface: #141E28;
  --color-surface-hover: #192634;
  --color-surface-elevated: #1D2C3B;
  --color-text-primary: #EDF2F7;
  --color-text-secondary: #94A3B8;
  --color-text-muted: #64748B;
  --color-border: #243545;
  --color-border-subtle: #1A2733;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 16px 36px rgba(0, 0, 0, 0.65);
}