/* ==========================================================================
   Родная вода — дизайн-токены
   Направление: «Чистота и свежесть»
   ========================================================================== */

:root {
  /* --- Цвет: фон и поверхности --- */
  --color-bg: #F5FAFD;
  --color-bg-alt: #EAF4FB;
  --color-surface: #FFFFFF;
  --color-border: #D0E0F1;

  /* --- Цвет: текст --- */
  --color-text: #10233D;
  --color-text-muted: #52708C;
  --color-text-faint: #8AA3BC;
  --color-text-on-brand: #FFFFFF;

  /* --- Цвет: бренд (аква-голубой — вода, информационные акценты) --- */
  --color-brand-100: #E9F2FB;
  --color-brand-300: #ABCBED;
  --color-brand-500: #5C97D6;
  --color-brand-600: #3378C1;
  --color-brand-700: #255A93;

  /* --- Цвет: CTA (весенне-зелёный — действие, заказ) --- */
  --color-cta-100: #DCFCE7;
  --color-cta-300: #86EFAC;
  --color-cta-500: #22C55E;
  --color-cta-600: #16A34A;
  --color-cta-700: #15803D;
  --color-cta-800: #116932;

  /* --- Цвет: тёмные контраст-карточки (акцент из референсов) --- */
  --color-ink: #0B1526;
  --color-ink-soft: #16223A;

  /* --- Цвет: статусы --- */
  --color-danger: #D14343;
  --color-warning: #C98A1F;

  /* --- Типографика --- */
  --font-base: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Gilroy — коммерческий шрифт, не на Google Fonts. Пока не подключены
     лицензионные файлы, используем Poppins как близкий по духу фолбэк. */
  --font-heading: 'Gilroy', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs: 0.8125rem;   /* 13px */
  --fs-sm: 0.9375rem;   /* 15px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  --fs-2xl: clamp(1.875rem, 1.5rem + 1.8vw, 2.5rem);
  --fs-3xl: clamp(2.25rem, 1.7rem + 3vw, 3.25rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* --- Отступы (шкала 8/4) --- */
  --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;

  /* --- Радиусы --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-full: 999px;

  /* --- Тени --- */
  --shadow-sm: 0 1px 2px rgba(16, 35, 61, 0.06), 0 1px 1px rgba(16, 35, 61, 0.04);
  --shadow-md: 0 8px 24px rgba(16, 35, 61, 0.08);
  --shadow-lg: 0 16px 40px rgba(16, 35, 61, 0.12);
  --shadow-cta: 0 8px 20px rgba(22, 163, 74, 0.32);

  /* --- Layout --- */
  --container-max: 1320px;
  --gutter: 20px;
  --tap-min: 48px;

  /* --- Переходы --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
}

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