/* ==========================================================================
   Design tokens — Guarantee Gadgets UAE · v4 (brand purple / orange / navy)
   RTL-ready: logical properties are used throughout instead of left/right.
   ========================================================================== */
:root {
  --color-primary: #793CF3;
  --color-primary-hover: #5421C8;
  --color-primary-tint: #F1EBFE;
  --color-primary-wash: #F8F5FE;
  --color-primary-line: #DCC9FB;
  --color-accent: #FF5A0A;          /* large graphics / campaign accents only */
  --color-accent-text: #C84400;     /* AA-safe: sale badges, savings text */
  --color-accent-tint: #FFF1EA;
  --color-dark: #16182B;
  --color-dark-deep: #14163F;
  --color-dark-bg: #090B22;
  --color-dark-line: #2A2C55;

  --color-text: #16182B;
  --color-body: #475467;
  --color-muted: #667085;
  --color-subtle: #98A2B3;
  --color-background: #FFFFFF;
  --color-surface: #F7F7FA;
  --color-soft: #F2F4F7;
  --color-border: #E7E8ED;
  --color-border-strong: #D0D5DD;
  --color-on-dark: #FFFFFF;
  --color-on-dark-muted: #C9CBE4;

  --color-success: #18A957;
  --color-success-dot: #18A957;
  --color-success-tint: #ECFDF3;
  --color-warning: #B54708;
  --color-warning-dot: #F79009;
  --color-danger: #D92D20;
  --color-danger-tint: #FEF3F2;

  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.625rem);
  --fs-h2: clamp(1.625rem, 1.25rem + 1.2vw, 2.375rem);
  --fs-h1: clamp(2rem, 1.4rem + 2.2vw, 3.375rem);
  --lh-tight: 1.12;
  --lh-body: 1.6;

  --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;
  --space-section: clamp(48px, 4vw + 24px, 88px);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(22, 24, 43, 0.05);
  --shadow-md: 0 4px 16px rgba(22, 24, 43, 0.07);
  --shadow-lg: 0 12px 28px rgba(22, 24, 43, 0.12);
  --shadow-overlay: 0 24px 64px rgba(9, 11, 34, 0.28);
  --ring: 0 0 0 4px rgba(121, 60, 243, 0.18);

  --container-width: 1320px;
  --container-pad: clamp(16px, 2.4vw, 32px);
  --header-h: 84px;
  --bottom-nav-h: 64px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 220ms;

  --z-header: 50; --z-dropdown: 60; --z-bottom-nav: 70; --z-overlay: 100; --z-toast: 120;
}