/* ============================================================
   commerce — design tokens
   Объявляются на .ct-storefront, не на :root.
   Значения цветов и размеров — из PROJECT.md (v0.1).
   ============================================================ */

.ct-storefront {
  /* Цвета */
  --ct-color-text: #172033;
  --ct-color-muted: #526078;
  --ct-color-bg: #ffffff;
  --ct-color-surface: #f4f7fb;
  --ct-color-border: #d8e0ec;
  --ct-color-primary: #2454d6;
  --ct-color-primary-hover: #1c43ad;
  --ct-color-on-primary: #ffffff;
  --ct-color-danger: #b42318;
  --ct-color-success: #176b43;

  /* Типографика */
  --ct-font-system: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --ct-font-family: var(--ct-font-system);
  --ct-font-size-base: 16px;
  --ct-line-height-base: 1.5;

  /* Пространственная шкала, кратная 4 px */
  --ct-space-1: 4px;
  --ct-space-2: 8px;
  --ct-space-3: 12px;
  --ct-space-4: 16px;
  --ct-space-5: 20px;
  --ct-space-6: 24px;
  --ct-space-7: 28px;
  --ct-space-8: 32px;

  /* Радиусы */
  --ct-control-radius: 8px;
  --ct-radius-sm: 8px;
  --ct-radius-md: 16px;
  --ct-radius-lg: 24px;

  /* Ширина содержимого, тени, фокус, переходы */
  --ct-content-max: 1320px;
  --ct-shadow-card: 0 1px 2px rgba(23, 32, 51, 0.06),
    0 4px 12px rgba(23, 32, 51, 0.08);
  --ct-focus-ring: 0 0 0 3px rgba(36, 84, 214, 0.35);
  --ct-transition-fast: 150ms ease;

  /* Дополнительные токены */
  --ct-font-size-sm: 14px;
  --ct-font-size-lg: 20px;
  --ct-font-size-xl: 26px;
  --ct-font-weight-semibold: 600;
  --ct-border-width: 1px;
  --ct-radius-pill: 999px;
  --ct-space-section: clamp(40px, 6vw, 72px);
}

/* Palettes preserve the white background and semantic status colors. */
.ct-storefront.ct-accent-green {
  --ct-color-primary: #176b43;
  --ct-color-primary-hover: #125334;
  --ct-focus-ring: 0 0 0 3px rgb(23 107 67 / .35);
}
.ct-storefront.ct-accent-purple {
  --ct-color-primary: #7038b7;
  --ct-color-primary-hover: #572b8f;
  --ct-focus-ring: 0 0 0 3px rgb(112 56 183 / .35);
}
.ct-storefront.ct-accent-red {
  --ct-color-primary: #b42335;
  --ct-color-primary-hover: #901c2a;
  --ct-focus-ring: 0 0 0 3px rgb(180 35 53 / .35);
}
.ct-storefront.ct-accent-orange {
  --ct-color-primary: #a8430b;
  --ct-color-primary-hover: #843509;
  --ct-focus-ring: 0 0 0 3px rgb(168 67 11 / .35);
}
.ct-storefront.ct-accent-graphite {
  --ct-color-primary: #374151;
  --ct-color-primary-hover: #1f2937;
  --ct-focus-ring: 0 0 0 3px rgb(55 65 81 / .35);
}