:root {
  /* Brand Colors */
  --brand-primary:       #0088CC;
  --brand-primary-dark:  #0070AA;
  --brand-primary-light: #33AADD;
  --brand-primary-gradient: linear-gradient(135deg, #0088CC 0%, #0066AA 100%);

  --brand-secondary:     #FF6B35;

  /* Grays */
  --brand-gray-50:  #FAFBFC;
  --brand-gray-100: #F1F5F9;
  --brand-gray-200: #E2E8F0;
  --brand-gray-300: #CBD5E1;
  --brand-gray-400: #94A3B8;
  --brand-gray-500: #64748B;
  --brand-gray-600: #475569;
  --brand-gray-700: #334155;
  --brand-gray-800: #1E293B;
  --brand-gray-900: #0F172A;

  /* Text */
  --brand-text:       #1E293B;
  --brand-text-muted: #64748B;
  --brand-white:      #FFFFFF;

  /* Surfaces */
  --brand-surface:      #FFFFFF;
  --brand-surface-soft: #F8FAFC;
  --brand-border:       #E2E8F0;

  /* Shadows */
  --brand-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --brand-shadow:    0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
  --brand-shadow-md: 0 10px 15px -3px rgba(0,0,0,0.08);
  --brand-shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.1);

  /* Radius */
  --brand-radius-sm: 6px;
  --brand-radius:    8px;
  --brand-radius-md: 12px;
  --brand-radius-lg: 16px;
  --brand-radius-full: 9999px;

  /* Layout */
  --header-height:       80px;
  --container-padding:   1.5rem;

  /* Typography */
  --font-ar: 'Cairo', sans-serif;
  --font-en: 'Inter', sans-serif;

  /* Transitions */
  --transition: 0.22s ease;

  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-fixed:    1030;
}