:root {
  /* Brand colors - all overridable via JS customizer */
  --color-primary: #1a1a2e;
  --color-primary-hover: #16213e;
  --color-accent: #e94560;
  --color-accent-hover: #c73652;

  /* Neutral scale */
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-400: #9ca3af;
  --color-gray-600: #4b5563;
  --color-gray-900: #111827;

  /* COD-specific */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;

  /* Typography */
  --font-primary: 'Cairo', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Layout */
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 16px;
  --drawer-width: 420px;
  --drawer-z-index: 99999;

  /* Shadows */
  --shadow-drawer: -4px 0 24px rgba(0,0,0,0.15);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.08);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-drawer: 320ms cubic-bezier(0.32, 0, 0.15, 1);
}

/* RTL support — mirror drawer shadow */
[dir="rtl"] {
  --shadow-drawer: 4px 0 24px rgba(0,0,0,0.15);
}