* {
    font-family: 'Cairo', sans-serif;
}
:root {
  /* ===========================================
     🎨 PRIMARY BRAND COLORS (Blue Theme)
     =========================================== */
  --primary-color: #0D6EFD;
  --primary-light: #4D8BFD;
  --primary-darker: #0A58CA;
  --accent-color: #0DCAF0;
  --primary-rgb: 13, 110, 253;

  /* ===========================================
     🌗 BACKGROUND & SURFACE COLORS
     =========================================== */
  --background-light: #F8F9FA;
  --surface-light: #FFFFFF;
  --background-dark: #0F1115;
  --surface-dark: #171A20;

  /* ===========================================
     📝 TEXT COLORS (Blue Optimized – Same Names)
     =========================================== */
  --text-primary: #000000;
  --text-secondary: #333333;
  --text-tertiary: #666666;
  --text-light: #FFFFFF;
  --text-hint: #999999;
  --text-primary-dark: #FFFFFF;
  --text-secondary-dark: #E8E8E8;
  --text-tertiary-dark: #D0D0D0;
  --text-dark: #C0C0C0;

  /* ===========================================
     ⚙️ NEUTRAL & BORDER COLORS
     =========================================== */
  --grey: #ADB5BD;
  --light-grey: #DEE2E6;
  --border-color: #CED4DA;
  --border-color-dark: #495057;

  /* ===========================================
     🎨 TEXT ON COLORED BACKGROUNDS
     =========================================== */
  --text-on-primary: #FFFFFF;
  --text-on-secondary: #FFFFFF;
  --text-on-success: #FFFFFF;
  --text-on-error: #FFFFFF;
  --text-on-warning: #000000;

  /* ===========================================
     📍 ENHANCED TEXT COLORS FOR USE CASES
     =========================================== */
  --text-on-card: #000000;
  --text-label: #000000;
  --text-placeholder: #888888;

  /* ===========================================
     🟢 SUCCESS, 🔴 ERROR, 🟡 WARNING
     =========================================== */
  --success: #198754;
  --error: #DC3545;
  --warning: #FFC720;

  /* ===========================================
     SECONDARY / TERTIARY COLORS
     =========================================== */
  --secondary-color: #6C757D;
  --secondary-light: #ADB5BD;
  --tertiary-color: #0DCAF0;
  --tertiary-light: #0DCAF0;
  --tertiary-dark: #0DCAF0;

  /* ===========================================
     GREY SCALE
     =========================================== */
  --grey-50: #FAFAFA;
  --grey-100: #F5F5F5;
  --grey-200: #EEEEEE;
  --grey-300: #E0E0E0;
  --grey-400: #BDBDBD;
  --grey-500: #9E9E9E;
  --grey-600: #757575;
  --grey-700: #616161;
  --grey-800: #424242;
  --grey-900: #212121;

  /* ===========================================
     CARD / BUTTON / MISC
     =========================================== */
  --card-gray-light: #FFFFFF;
  --card-gray-dark: #1E1E1E;
  --button-light: #4D8BFD;
  --button-dark: #0A58CA;
  --button-disabled: #BDBDBD;
  --button-text-light: #FFFFFF;
  --button-text-dark: #FFFFFF;
  --rating-color: #FFC720;
  --sale-price: #198754;
  --original-price: #6C757D;
  --shadow-color: rgba(0, 0, 0, 0.15);
  --shadow-color-dark: rgba(0, 0, 0, 0.3);
  --gradient-start: #0D6EFD;
  --gradient-end: #4D8BFD;
  --overlay-light: rgba(0, 0, 0, 0.15);
  --overlay-dark: rgba(255, 255, 255, 0.08);
  --hover-overlay: rgba(255, 255, 255, 0.06);
  --pressed-overlay: rgba(255, 255, 255, 0.1);

  /* Dynamic colors (will be toggled by JS) */
  --primary: var(--primary-color);
  --background: var(--background-light);
  --bg: var(--background-light);
  --surface: var(--surface-light);
  --text-primary-current: var(--text-primary);
  --text-secondary-current: var(--text-secondary);
  --text-tertiary-current: var(--text-tertiary);
  --border-color-current: var(--border-color);
  --card-bg: var(--card-gray-light);
  --shadow-color-current: var(--shadow-color);
}

[data-theme="dark"] {
  --primary: var(--primary-light);
  --primary-rgb: 77, 139, 253;
  --background: var(--background-dark);
  --bg: var(--background-dark);
  --surface: var(--surface-dark);
  --text-primary-current: var(--text-primary-dark);
  --text-secondary-current: var(--text-secondary-dark);
  --text-tertiary-current: var(--text-tertiary-dark);
  --border-color-current: var(--border-color-dark);
  --card-bg: var(--card-gray-dark);
  --shadow-color-current: var(--shadow-color-dark);
}

[data-lang="ar"] {
  direction: rtl;
}