/* lună storefront design tokens (TASK-024, ADR-014).
   Phone values are the defaults; the @media block at the end switches size tokens to desktop from 960 px.
   Contrast pairs are enforced by design-system.test.ts: change a colour here and run vitest. */

:root {
  /* ── Colour: neutrals (warm, from edl-light.ru) ─────────────────────────────── */
  --ds-color-canvas: #f0efea; /* page background */
  --ds-color-surface: #ffffff; /* fields, raised panels */
  --ds-color-surface-2: #e8e6df; /* photo placeholder, hover wash, selected chip */
  --ds-color-ink: #1c1c1c; /* text, 14.80:1 on canvas */
  --ds-color-ink-muted: #6b655d; /* secondary text, 5.00:1 on canvas */
  --ds-color-line: #d9d5cc; /* dividers only (decorative, not a control edge) */
  --ds-color-line-strong: #857f75; /* control edges: 3.45 on canvas, 3.97 on surface, 3.18 on surface-2 */

  /* ── Colour: brand (lună turquoise, spec v2 §3.7) ─────────────────────────── */
  --ds-color-accent: #7db5be; /* decorative on light (1.98:1); text only on the dark footer */
  --ds-color-accent-soft: #e3eff1; /* tinted background behind accent elements */
  --ds-color-primary: #3e7c86; /* button fill, white label 4.74:1 */
  --ds-color-primary-hover: #356b74; /* hover / pressed fill */
  --ds-color-on-primary: #ffffff;
  --ds-color-link: #356b74; /* link text, 5.20:1 on canvas */

  /* ── Colour: commerce and status ─────────────────────────────────────────── */
  --ds-color-price: #74655c; /* warm taupe, 4.85:1 on canvas */
  --ds-color-danger: #b3261e;
  --ds-color-success: #2b7349;
  --ds-color-focus: #356b74; /* focus ring */

  /* ── Colour: footer (dark band, from edl-light.ru) ──────────────────────────── */
  --ds-color-footer-bg: #1c1c1c;
  --ds-color-footer-ink: #f0efea;
  --ds-color-footer-muted: #a8a39a;
  --ds-color-footer-link: #7db5be;

  /* ── Type ───────────────────────────────────────────────────────────────── */
  --ds-font-heading: 'Nunito', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --ds-font-body: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;

  /* size / line height; phone values (desktop below) */
  --ds-text-display: 2rem; /* 32 px: hero line */
  --ds-leading-display: 1.15;
  --ds-text-h1: 1.5rem; /* 24 px: page title, product name */
  --ds-leading-h1: 1.25;
  --ds-text-h2: 1.25rem; /* 20 px: section title */
  --ds-leading-h2: 1.3;
  --ds-text-h3: 1.0625rem; /* 17 px: card group, accordion title */
  --ds-leading-h3: 1.4;
  --ds-text-body: 0.9375rem; /* 15 px */
  --ds-leading-body: 1.6;
  --ds-text-small: 0.8125rem; /* 13 px: card title, meta */
  --ds-leading-small: 1.5;
  --ds-leading-tight: 1.2; /* one-line controls: buttons */
  --ds-leading-field: 1.4; /* form fields */
  --ds-text-overline: 0.6875rem; /* 11 px, uppercase: nav on desktop, "16 цветов" */
  --ds-leading-overline: 1.45;
  --ds-tracking-overline: 0.08em;
  --ds-text-price: 0.9375rem; /* 15 px */
  --ds-text-price-lg: 1.125rem; /* 18 px: product page */
  --ds-text-field: 1rem; /* 16 px at every width: iOS does not zoom a field of 16 px or more */
  --ds-text-button: 0.9375rem; /* 15 px */

  /* ── Space (4 px grid) ─────────────────────────────────────────────────── */
  --ds-space-1: 0.25rem; /* 4 */
  --ds-space-2: 0.5rem; /* 8 */
  --ds-space-3: 0.75rem; /* 12 */
  --ds-space-4: 1rem; /* 16 */
  --ds-space-5: 1.25rem; /* 20 */
  --ds-space-6: 1.5rem; /* 24 */
  --ds-space-8: 2rem; /* 32 */
  --ds-space-10: 2.5rem; /* 40 */
  --ds-space-12: 3rem; /* 48 */
  --ds-space-16: 4rem; /* 64 */
  --ds-space-20: 5rem; /* 80 */
  --ds-space-24: 6rem; /* 96 */

  /* ── Radius ─────────────────────────────────────────────────────────────── */
  --ds-radius-none: 0; /* photos: both references keep them square-cornered */
  --ds-radius-sm: 4px; /* fields, thumbnails */
  --ds-radius-md: 8px; /* panels */
  --ds-radius-pill: 999px; /* buttons, chips */
  --ds-radius-round: 50%; /* icon buttons, colour swatches */

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --ds-duration-fast: 150ms;
  --ds-duration-base: 200ms;
  --ds-duration-slow: 500ms;
  --ds-ease-standard: ease-in-out;
  --ds-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); /* hamimidesign.com buttons and images */

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --ds-container: 75rem; /* 1200 px */
  --ds-container-narrow: 45rem; /* 720 px: text pages */
  --ds-gutter: 1.25rem; /* 20 px page side padding */
  --ds-grid-columns: 2;
  --ds-grid-gap-x: 1rem; /* 16 px */
  --ds-grid-gap-y: 2rem; /* 32 px */
  --ds-section-gap: 3rem; /* 48 px between page sections */
  --ds-header-height: 4rem; /* 64 px */
  --ds-control-height: 2.75rem; /* 44 px: touch target minimum */
  --ds-control-height-lg: 3rem; /* 48 px: primary buy button */
  --ds-photo-ratio: 1 / 1; /* product photos in the grid */
  --ds-photo-ratio-product: 4 / 5; /* main photo on the product page */
  --ds-product-columns: minmax(0, 1fr); /* product page: gallery and info stacked */
  --ds-thumb-size: 3.75rem; /* 60 px gallery thumbnail */
  --ds-logo-height: 2rem; /* 32 px */
  --ds-border-width: 1px;
  --ds-focus-ring: 0 0 0 2px var(--ds-color-canvas), 0 0 0 4px var(--ds-color-focus);
  --ds-focus-ring-dark: 0 0 0 2px var(--ds-color-footer-bg), 0 0 0 4px var(--ds-color-footer-link); /* on the footer */

  /* ── Layers ─────────────────────────────────────────────────────────────── */
  --ds-z-header: 20;
  --ds-z-drawer: 40;
  --ds-z-toast: 60;
}

/* Breakpoints (CSS variables cannot be used in media queries; keep these numbers in sync with the preset):
   sm 640 px: wider phones and small tablets; lg 960 px: desktop layout; xl 1200 px: container reaches full width. */
@media (min-width: 640px) {
  :root {
    --ds-gutter: 2rem; /* 32 px */
    --ds-grid-gap-x: 1.5rem; /* 24 px */
  }
}

@media (min-width: 960px) {
  :root {
    --ds-text-display: 3rem; /* 48 px */
    --ds-text-h1: 2rem; /* 32 px */
    --ds-text-h2: 1.625rem; /* 26 px */
    --ds-text-h3: 1.25rem; /* 20 px */
    --ds-text-body: 1rem; /* 16 px */
    --ds-text-small: 0.875rem; /* 14 px */
    --ds-text-overline: 0.75rem; /* 12 px */
    --ds-text-price: 1rem; /* 16 px */
    --ds-text-price-lg: 1.25rem; /* 20 px */
    --ds-gutter: 2.5rem; /* 40 px */
    --ds-grid-columns: 3;
    --ds-grid-gap-x: 2.5rem; /* 40 px */
    --ds-grid-gap-y: 3rem; /* 48 px */
    --ds-section-gap: 5rem; /* 80 px */
    --ds-header-height: 5rem; /* 80 px */
    --ds-product-columns: minmax(0, 7fr) minmax(0, 5fr); /* gallery : info */
    --ds-thumb-size: 4.5rem; /* 72 px */
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-duration-fast: 0ms;
    --ds-duration-base: 0ms;
    --ds-duration-slow: 0ms;
  }
}