/* =============================================================================
   DD DESIGN TOKENS — Shopify / Apple Store rhythm (single source of truth)
   Load before dd-product-cards.css · used by all /components
   ============================================================================= */

:root {
  /* Typography */
  --dd-font: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --dd-text-xs: 0.6875rem;
  --dd-text-sm: 0.8125rem;
  --dd-text-base: 0.9375rem;
  --dd-text-lg: 1.0625rem;
  --dd-text-xl: 1.25rem;
  --dd-text-2xl: 1.5rem;
  --dd-weight-normal: 400;
  --dd-weight-medium: 500;
  --dd-weight-semibold: 600;
  --dd-weight-bold: 700;
  --dd-leading-tight: 1.2;
  --dd-leading-normal: 1.45;
  --dd-tracking-tight: -0.02em;

  /* Color */
  --dd-ink: #0c0c0e;
  --dd-muted: #64656b;
  --dd-line: #e8e8ec;
  --dd-surface: #ffffff;
  --dd-bg: #f7f7f8;
  --dd-media-bg: #f7f7f8;
  --dd-green: #0f7a45;
  --dd-green-soft: #e8f5ee;
  --dd-accent: #c7511f;
  --dd-star: #f59e0b;

  /* Spacing (8px grid) */
  --dd-space-1: 4px;
  --dd-space-2: 8px;
  --dd-space-3: 12px;
  --dd-space-4: 16px;
  --dd-space-5: 24px;
  --dd-space-6: 32px;
  --dd-space-7: 40px;
  --dd-space-8: 48px;

  /* Radius */
  --dd-radius-sm: 8px;
  --dd-radius-md: 12px;
  --dd-radius-lg: 16px;
  --dd-radius-pill: 999px;

  /* Shadows — identical sitewide */
  --dd-shadow-sm: 0 1px 2px rgba(12, 12, 14, 0.04);
  --dd-shadow-md: 0 4px 16px rgba(12, 12, 14, 0.06);
  --dd-shadow-lg: 0 8px 32px rgba(12, 12, 14, 0.08);

  /* Motion */
  --dd-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dd-duration: 0.22s;

  /* Layout */
  --dd-content-max: 1280px;
  --dd-touch: 44px;
}

@media (min-width: 768px) {
  :root {
    --dd-space-4: 20px;
    --dd-space-5: 28px;
    --dd-space-6: 36px;
  }
}

@media (min-width: 1440px) {
  :root {
    --dd-space-6: 40px;
    --dd-space-7: 48px;
  }
}

/* Bridge legacy tokens → dd tokens */
:root {
  --pc-font: var(--dd-font);
  --pc-line: var(--dd-line);
  --pc-surface: var(--dd-surface);
  --pc-media-bg: var(--dd-media-bg);
  --pc-ink: var(--dd-ink);
  --pc-muted: var(--dd-muted);
  --pc-shadow: var(--dd-shadow-md);
  --pc-shadow-hover: var(--dd-shadow-lg);
  --ls-font: var(--dd-font);
  --ls-ink: var(--dd-ink);
  --ls-muted: var(--dd-muted);
  --ls-line: var(--dd-line);
  --ls-surface: var(--dd-surface);
  --ls-bg: var(--dd-bg);
  --ls-shadow-sm: var(--dd-shadow-sm);
  --ls-shadow-md: var(--dd-shadow-md);
  --ls-shadow-lg: var(--dd-shadow-lg);
}