/* css/tokens.css */

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Anton';
  src: url('../fonts/Anton-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Цвет — палитра */
  --c-white: #FFFFFF;
  --c-bg-soft: #F2F0F5;
  --c-bg-milk: #E8E4DD;
  --c-black: #000000;
  --c-graphite: #1E1C24;
  --c-ink: #0D0D0D;
  --c-ink-2: #1A1A1A;
  --c-body-light: #5A5A5A;
  --c-body-dark: #9A9A9A;
  --c-accent: #8E2B34;
  --c-accent-soft: #A34049;
  --c-accent-bright: #E63946;
  --c-logo-red: #e2000f;
  --c-surface: #DAD6CE;

  /* Цвет — служебные (плейсхолдеры каркаса) */
  --c-ph-bg: #CCCCCC;
  --c-ph-text: #4D4D4D;

  /* Шрифты */
  --f-display: 'Oswald', sans-serif;
  --f-body: 'Montserrat', sans-serif;
  --f-hero: 'Playfair Display', Georgia, serif;
  /* 1.15 — заголовки в 2+ строки на мобильном не должны слипаться (было 0.95) */
  --lh-display: 1.15;
  --lh-body: 1.65;

  /* Типографическая шкала (мобильная, 375→768, модульный шаг ×~1.2) */
  --fs-caption: clamp(0.8125rem, 0.7529rem + 0.2545vw, 0.875rem);   /* 13 → 14px, мелкие метки/номера */
  --fs-small:   clamp(0.875rem, 0.7855rem + 0.3817vw, 0.9688rem);   /* 14 → 15.5px, вторичный UI-текст */
  --fs-button:  clamp(0.9375rem, 0.848rem + 0.3817vw, 1.0312rem);   /* 15 → 16.5px */
  --fs-body:    clamp(1rem, 0.8807rem + 0.5089vw, 1.125rem);        /* 16 → 18px, основной текст */
  --fs-h4:      clamp(1.125rem, 0.9461rem + 0.7634vw, 1.3125rem);   /* 18 → 21px, имена/подзаголовки в карточках */
  --fs-lead:    clamp(1.25rem, 1.0115rem + 1.0178vw, 1.5rem);       /* 20 → 24px, вводный абзац */
  --fs-h3:      clamp(1.375rem, 1.1365rem + 1.0178vw, 1.625rem);    /* 22 → 26px */
  --fs-h2:      clamp(2rem, 1.0458rem + 4.0712vw, 3rem);            /* 32 → 48px, было 32→48 жёстким брейкпоинтом */
  --fs-h1:      clamp(1.5rem, 4.2vw, 3.5rem);                       /* герой: значение не менялось, только вынесено в токен */

  /* Максимальная длина строки основного текста */
  --measure: 66ch;

  /* Модульная шкала отступов (шаг 4px) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-7: 2rem;     /* 32px */
  --space-8: 3rem;     /* 48px */
  --space-9: 4rem;     /* 64px */
  --space-10: 6rem;    /* 96px */

  /* Радиусы */
  --radius-card: 14px;
  --radius-pill: 999px;

  /* Тени */
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.08);

  /* Сетка / отступы (mobile-first базовые значения) */
  --container-max: 1440px;
  --gutter: 20px;
  --section-py: clamp(4rem, 2.0916rem + 8.1425vw, 6rem); /* 64 → 96px, плавно вместо жёсткого брейкпоинта */
  --nav-h: 72px;

  /* Размеры медиа-плейсхолдеров (.ph) */
  --media-dog-w: 400px;
  --media-avatar-d: 200px;
  --media-poster-w: 300px;
  --media-logo-w: 160px;
  --media-icon-w: 64px;

  /* Тайминги */
  --dur-fast: 0.2s;
  --dur-base: 0.4s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Единая система появления при скролле (mягкий, медленный, каскадный) */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-reveal: 800ms;
  --dur-ui: 450ms;
  --stagger: 110ms;
  --reveal-shift: 24px;
  --reveal-blur: 6px;
}

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

@media (min-width: 1440px) {
  :root {
    --gutter: 48px;
    --section-py: 128px;
  }
}