/* DZKeys design primitives. One source for future components. Phase 3. */
:root {
  color-scheme: dark;
  --dzkeys-color-bg: #080d18;
  --dzkeys-color-surface: #111827;
  --dzkeys-color-header: #0f192e;
  --dzkeys-color-text: #e5e7eb;
  --dzkeys-color-heading: #ffffff;
  --dzkeys-color-muted: #a9b6cb;
  --dzkeys-color-border: #263246;
  --dzkeys-color-primary: #2563eb;
  --dzkeys-color-primary-hover: #1d4ed8;
  --dzkeys-color-on-primary: #ffffff;
  --dzkeys-color-link: #82bdff;
  --dzkeys-color-focus: #00a3ff;
  --dzkeys-color-whatsapp: #15803d;
  --dzkeys-color-on-whatsapp: #ffffff;
  --dzkeys-font-body: Inter, Arial, sans-serif;
  --dzkeys-font-weight-body: 400;
  --dzkeys-font-weight-heading: 700;
  --dzkeys-font-size-body: 1rem;
  --dzkeys-font-size-small: 0.8125rem;
  --dzkeys-font-size-section: 1.375rem;
  --dzkeys-font-size-category: clamp(0.75rem, 3.3vw, 1.0625rem);
  --dzkeys-font-size-product: 0.875rem;
  --dzkeys-line-height-body: 1.6;
  --dzkeys-line-height-heading: 1.35;
  --dzkeys-space-1: 0.25rem;
  --dzkeys-space-2: 0.5rem;
  --dzkeys-space-3: 0.75rem;
  --dzkeys-space-4: 1rem;
  --dzkeys-space-5: 1.25rem;
  --dzkeys-space-6: 1.5rem;
  --dzkeys-space-8: 2rem;
  --dzkeys-space-10: 2.5rem;
  --dzkeys-space-14: 3.5rem;
  --dzkeys-radius-control: 0.5rem;
  --dzkeys-radius-panel: 0.75rem;
  --dzkeys-container-max: 80rem;
  --dzkeys-gutter: 0.75rem;
  --dzkeys-section-gap: 2rem;
  --dzkeys-control-min: 2.75rem;
  --dzkeys-duration: 180ms;
  --dzkeys-focus-width: 2px;
  --dzkeys-focus-offset: 3px;
}
/* CSS media queries use literal breakpoints; documented in design-system.md. */
@media (min-width: 601px) {
  :root {
    --dzkeys-gutter: 1.5rem;
    --dzkeys-font-size-section: 1.625rem;
    --dzkeys-font-size-category: 1.5rem;
    --dzkeys-font-size-product: 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dzkeys-duration: 0ms; }
}