/*
 * Дизайн-токени. Кольори й шрифти перезаписуються з CONFIG (scripts/theme.js);
 * значення тут — запасні, щоб сторінка мала правильний вигляд ще до запуску JS.
 */
:root {
  /* Кольори */
  --color-bg: #FBF7F2;
  --color-surface: #F4ECE2;
  --color-surface-strong: #E9DFD0;
  --color-tint: #EFE4D3;
  --color-decor: #B8987A;
  --color-gold-text: #7D5F3A;
  --color-accent: #1B2A3D;
  --color-accent-hover: #111C2B;
  --color-on-accent: #FBF7F2;
  --color-text: #1E2633;
  --color-text-secondary: #4A5361;
  --color-muted: #6E6A66;
  --color-border: #DCD3C6;
  --color-focus: #7D5F3A;
  --color-sale: #A13F32;
  --color-success: #3F6B45;
  --color-error: #B3261E;

  /* Шрифти */
  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Типографіка */
  --text-xs: 0.75rem;   /* 12 */
  --text-sm: 0.875rem;  /* 14 */
  --text-md: 1rem;      /* 16 */
  --text-lg: 1.125rem;  /* 18 */
  --h1: clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem);   /* 40 → 72 */
  --h2: clamp(2rem, 1.5rem + 2vw, 3rem);          /* 32 → 48 */
  --h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); /* 22 → 28 */

  /* Відступи: крок 4 px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Сітка */
  --container: 1320px;
  --gutter: 16px;
  --section-y: clamp(64px, 6vw + 40px, 112px);

  /* Радіуси */
  --radius-sm: 6px;
  --radius-field: 10px;
  --radius-media: 12px;
  --radius-card: 20px;
  --radius-pill: 999px;

  /* Елементи */
  --control-h: 48px;
  --tap: 44px;
  --header-h: 64px;

  /* Тіні й рух */
  --shadow-panel: 0 18px 40px -18px rgb(27 42 61 / 0.25);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 180ms;
  --dur: 280ms;
  --dur-slow: 400ms;

  /* Шари */
  --z-header: 50;
  --z-overlay: 90;
  --z-drawer: 100;
  --z-toast: 120;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

@media (min-width: 1024px) {
  :root { --gutter: 48px; --header-h: 76px; }
}