/**
 * DZD Sooq Theme — design tokens (presentation copy).
 * Visual values match docs/DZD_SOOQ_DESIGN_SYSTEM.md / Core tokens.
 * Theme owns this file; Core remains product SoT until a later sync phase.
 */

:root,
.dzd-ui {
  --dzd-space-1: 4px;
  --dzd-space-2: 8px;
  --dzd-space-3: 12px;
  --dzd-space-4: 16px;
  --dzd-space-5: 20px;
  --dzd-space-6: 24px;
  --dzd-space-7: 32px;
  --dzd-space-8: 40px;
  --dzd-space-9: 48px;
  --dzd-space-10: 64px;

  --dzd-radius-xs: 8px;
  --dzd-radius-sm: 12px;
  --dzd-radius-md: 16px;
  --dzd-radius-lg: 20px;
  --dzd-radius-pill: 999px;

  --dzd-shadow-sm: 0 1px 2px rgba(17, 19, 34, 0.05), 0 4px 12px rgba(17, 19, 34, 0.04);
  --dzd-shadow-card: 0 4px 10px rgba(17, 19, 34, 0.05), 0 14px 36px rgba(17, 19, 34, 0.1);
  --dzd-shadow-accent: 0 8px 20px rgba(94, 67, 214, 0.35);
  --dzd-shadow-focus: 0 0 0 3px rgba(94, 67, 214, 0.2);

  --dzd-color-accent: #5e43d6;
  --dzd-color-accent-soft: rgba(94, 67, 214, 0.1);
  --dzd-color-accent-border: #cfc4ff;
  --dzd-color-page: #eef0f5;
  --dzd-color-page-deep: #e8ebf2;
  --dzd-color-surface: #ffffff;
  --dzd-color-surface-muted: #f6f7fa;
  --dzd-color-border: #d8dae3;
  --dzd-color-border-strong: #c5c8d4;
  --dzd-color-text: #111322;
  --dzd-color-text-muted: #5b5f73;
  --dzd-color-text-subtle: #8b90a5;
  --dzd-color-on-accent: #ffffff;

  --dzd-layout-max: 1310px;
  --dzd-layout-gutter: 24px;
  --dzd-layout-gutter-tablet: 20px;

  --dzd-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dzd-font-display: "Red Hat Display", "Inter", system-ui, sans-serif;
  --dzd-font-arabic: "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic", system-ui, sans-serif;

  --dzd-fs-xs: 13px;
  --dzd-fs-sm: 14px;
  --dzd-fs-md: 15px;
  --dzd-fs-base: 16px;
  --dzd-fs-lg: 18px;
  --dzd-fs-xl: 20px;
  --dzd-fs-2xl: 24px;
  --dzd-fs-3xl: 28px;
  --dzd-fs-4xl: 32px;

  --dzd-lh-tight: 1.25;
  --dzd-lh-snug: 1.4;
  --dzd-lh-body: 1.5;
  --dzd-lh-relaxed: 1.65;

  --dzd-tracking-tight: -0.02em;
  --dzd-tracking-display: -0.03em;

  --dzd-ease: 200ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Breakpoints (documentation only — media queries use px):
     Desktop ≥1200 · Tablet 768–1199 · Mobile ≤767 */
  --dzd-bp-desktop: 1200px;
  --dzd-bp-tablet: 768px;
  --dzd-bp-mobile-max: 767px;

  /* Chrome popup surface */
  --hdr-popup-bg: #ffffff;
  --hdr-popup-border: rgba(17, 24, 39, 0.08);
  --hdr-popup-radius: 16px;
  --hdr-popup-shadow:
    0 0 0 1px rgba(17, 24, 39, 0.04),
    0 4px 6px -1px rgba(17, 24, 39, 0.06),
    0 16px 40px -8px rgba(17, 24, 39, 0.18);
  --hdr-popup-duration: 180ms;
  --hdr-popup-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}