/**
 * SafeCore E-Commerce - Brand Theme & Design System
 * Charcoal Black: #20252B
 * Safety Orange: #F58220
 * White: #FFFFFF
 * Gray Light: #F4F6F8
 */

:root {
  /* Brand Core Colors */
  --color-primary: #F58220;          /* Safety Orange */
  --color-primary-hover: #E07112;    /* Darker Orange for active/hover */
  --color-primary-light: #FFF2E6;    /* Light Orange Tint */
  --color-primary-subtle: #FED7B5;
  
  --color-dark: #20252B;             /* Charcoal Black */
  --color-dark-light: #2D343C;       /* Slate Dark Gray */
  --color-dark-subtle: #3A434D;
  
  --color-bg-page: #FFFFFF;
  --color-bg-section: #F8FAFC;       /* Very Light Gray */
  --color-bg-card: #FFFFFF;
  --color-bg-surface: #F1F4F8;       /* Subtle Card Tint */

  /* Neutral Grays */
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* Functional Status Colors */
  --color-success: #16A34A;
  --color-success-bg: #DCFCE7;
  --color-warning: #D97706;
  --color-warning-bg: #FEF3C7;
  --color-danger: #DC2626;
  --color-danger-bg: #FEE2E2;
  --color-info: #0284C7;
  --color-info-bg: #E0F2FE;

  /* WhatsApp Brand Color */
  --color-whatsapp: #25D366;
  --color-whatsapp-dark: #128C7E;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-arabic: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
  
  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, 0.1), 0 1px 2px -1px rgba(16, 24, 40, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(16, 24, 40, 0.1), 0 4px 6px -4px rgba(16, 24, 40, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(16, 24, 40, 0.1), 0 8px 10px -6px rgba(16, 24, 40, 0.1);

  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

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

  /* Layout Constraints */
  --max-width-container: 1240px;
  --header-height: 74px;
}