/* ===== AL WADI STORE — DESIGN TOKENS ===== */
:root {
  /* === LIGHT THEME (Default) === */
  --bg-primary: #ffffff;
  --bg-secondary: #ffffff;
  --bg-tertiary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(255,255,255,0.7);
  --bg-glass-border: rgba(0,180,216,0.15);
  --bg-overlay: rgba(0,0,0,0.5);
  --bg-header: rgba(255,255,255,0.85);
  --bg-footer: #0a1628;
  --bg-input: #f8fafc;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #94a3b8;
  --text-inverse: #ffffff;
  --text-on-footer: #cbd5e1;

  --accent: #00b4d8;
  --accent-hover: #0096b7;
  --accent-light: rgba(0,180,216,0.1);
  --accent-glow: rgba(0,180,216,0.3);
  --accent-gradient: linear-gradient(135deg, #00b4d8, #0077b6);

  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --bg-product-media: #ffffff;
  --shadow-product-hover: 0 8px 24px rgba(15, 23, 42, 0.08);
  --border-product-hover: rgba(0, 180, 216, 0.28);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 20px rgba(0,180,216,0.15);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --font-heading: 'Inter', 'Noto Sans Arabic', sans-serif;
  --font-body: 'Outfit', 'Noto Sans Arabic', sans-serif;

  --header-h: 96px;
  --header-offset: var(--header-h);
  --logo-max-h: 72px;
  --logo-max-w: 240px;
  --container: 1680px;
  --container-padding-x: 20px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === DARK THEME === */
[data-theme="dark"] {
  --bg-primary: #0b1526;
  --bg-secondary: #0f1f35;
  --bg-tertiary: #121e32;
  --bg-card: #16243c;
  --bg-card-hover: #1c2e4a;
  --bg-glass: rgba(15, 31, 53, 0.88);
  --bg-glass-border: rgba(0, 180, 216, 0.28);
  --bg-overlay: rgba(0, 0, 0, 0.72);
  --bg-header: rgba(11, 21, 38, 0.97);
  --bg-footer: #050d18;
  --bg-input: #1a2d4a;

  --bg-product-media: #1a2d4a;
  --shadow-product-hover: 0 10px 28px rgba(0, 0, 0, 0.42);
  --border-product-hover: rgba(0, 180, 216, 0.38);

  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --text-inverse: #0f172a;
  --text-on-footer: #cbd5e1;

  --accent-light: rgba(0, 180, 216, 0.14);

  --border: #243b5c;
  --border-light: #1a2d4a;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.48);
  --shadow-xl: 0 20px 56px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 24px rgba(0, 180, 216, 0.22);
}

/* === RTL SUPPORT === */
[dir="rtl"] {
  --font-heading: 'Noto Sans Arabic', 'Inter', sans-serif;
  --font-body: 'Noto Sans Arabic', 'Outfit', sans-serif;
}