/* XShop Design Tokens — CSS custom properties. Logical, RTL-safe. */
:root {
  /* Palette */
  --xshop-primary: #0ea5e9;
  --xshop-primary-600: #0284c7;
  --xshop-primary-700: #0369a1;
  --xshop-secondary: #111827;
  --xshop-bg: #ffffff;
  --xshop-surface: #f8fafc;
  --xshop-surface-2: #f1f5f9;
  --xshop-card: #ffffff;
  --xshop-text: #0f172a;
  --xshop-muted: #64748b;
  --xshop-border: #e2e8f0;
  --xshop-input-bg: #ffffff;
  --xshop-input-border: #cbd5e1;
  --xshop-input-text: #0f172a;
  --xshop-focus: #0ea5e9;
  --xshop-link: #0ea5e9;
  --xshop-link-hover: #0284c7;
  --xshop-success: #16a34a;
  --xshop-success-bg: #f0fdf4;
  --xshop-warning: #f59e0b;
  --xshop-warning-bg: #fffbeb;
  --xshop-danger: #dc2626;
  --xshop-danger-bg: #fef2f2;

  /* Typography */
  --xshop-font-sans: system-ui, -apple-system, "Vazirmatn", "IRANSans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --xshop-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --xshop-text-xs: 0.75rem;  /* 12px */
  --xshop-text-sm: 0.875rem; /* 14px */
  --xshop-text-base: 1rem;   /* 16px */
  --xshop-text-lg: 1.125rem; /* 18px */
  --xshop-text-xl: 1.25rem;  /* 20px */
  --xshop-text-2xl: 1.5rem;  /* 24px */
  --xshop-text-3xl: 1.875rem;/* 30px */
  --xshop-text-4xl: 2.25rem; /* 36px */
  --xshop-weight-regular: 400;
  --xshop-weight-medium: 500;
  --xshop-weight-bold: 700;
  --xshop-leading-tight: 1.25;
  --xshop-leading: 1.6;
  --xshop-leading-relaxed: 1.75;

  /* Spacing / Layout */
  --xshop-space-1: 4px; --xshop-space-2: 8px; --xshop-space-3: 12px; --xshop-space-4: 16px;
  --xshop-space-5: 20px; --xshop-space-6: 24px; --xshop-space-8: 32px; --xshop-space-10: 40px;
  --xshop-space-12: 48px; --xshop-space-16: 64px;
  --xshop-container: 1280px;
  --xshop-container-narrow: 720px;
  --xshop-radius-sm: 8px; --xshop-radius-md: 14px; --xshop-radius-lg: 22px; --xshop-radius-full: 9999px;
  --xshop-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --xshop-shadow-md: 0 8px 24px rgba(0,0,0,.08);
  --xshop-shadow-lg: 0 16px 40px rgba(0,0,0,.12);
  --xshop-z-header: 40; --xshop-z-overlay: 50; --xshop-z-modal: 60;
  --xshop-transition-fast: 120ms ease;
  --xshop-transition: 180ms ease;
  --xshop-transition-slow: 280ms ease;

  /* Breakpoints (for reference; media queries use literal values) */
  --xshop-bp-sm: 640px;
  --xshop-bp-md: 768px;
  --xshop-bp-lg: 1024px;
  --xshop-bp-xl: 1280px;
  --xshop-bp-2xl: 1536px;
}

/* Dark mode — semantic swap, not inversion */
[data-theme="dark"] {
  --xshop-bg: #0b1220;
  --xshop-surface: #111a2e;
  --xshop-surface-2: #1a2542;
  --xshop-card: #151f38;
  --xshop-text: #e2e8f0;
  --xshop-muted: #94a3b8;
  --xshop-border: #1e2d4a;
  --xshop-input-bg: #0f1a33;
  --xshop-input-border: #24365e;
  --xshop-input-text: #e2e8f0;
  --xshop-focus: #38bdf8;
  --xshop-link: #38bdf8;
  --xshop-link-hover: #7dd3fc;
  --xshop-success-bg: #052e16;
  --xshop-warning-bg: #451a03;
  --xshop-danger-bg: #450a0a;
}

@media (prefers-reduced-motion: reduce) {
  :root { --xshop-transition: 0ms; --xshop-transition-fast: 0ms; --xshop-transition-slow: 0ms; }
}