/* =============================================================
   «Я-фотограф» — дизайн-токены
   Источник истины: LandingPages/tz-site-ya-fotograf.md §4
   Доработано скиллом ui-ux-pro-max (доводка, не замена системы).
   Дата: 2026-06-11

   Что здесь:
   - палитра ТЗ §4.2 без изменений + «усиленные» производные акцентов
     для интерактива (контраст WCAG 2.1 AA пройден);
   - типографика: 3 семейства (Montserrat убран как дубль Inter);
   - spacing / радиусы / тени / z-index / тайминги;
   - состояния кнопок (hover/active/focus/disabled).
   Все цвета проверены на фоне --color-bg (#FAFAF9).
   ============================================================= */

/* Самохостинг шрифтов (152-ФЗ, без Google Fonts).
   Файлы в public/assets/fonts/, скопированы из i-photograf-site (19.07.2026). */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-cyrillic-600-normal.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/playfair-display-cyrillic-600-normal.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/playfair-display-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* ---------- ЦВЕТ: база (ТЗ §4.2, не менять) ---------- */
  --color-bg:            #FAFAF9; /* тёплый белый, «фотобумага» */
  --color-text:          #1A1A1A; /* основной текст — 16.7:1 ✓ AAA */
  --color-text-muted:    #6B6B6B; /* вторичный текст — 5.1:1 ✓ AA  */
  --color-link:          #2563A8; /* ссылки/CTA — 5.9:1 ✓ AA       */

  /* Акценты тарифов — ДЕКОРАТИВНЫЕ (фоны, плашки, иллюстрации) */
  --accent-legkiy:        #4A90D9; /* спокойный синий   */
  --accent-unikalniy:     #E8913A; /* тёплый оранжевый  */
  --accent-fantastich:    #8B2E4F; /* глубокий бордовый */

  /* ---------- ЦВЕТ: «усиленные» производные для ИНТЕРАКТИВА ----------
     Базовые акценты Лёгкий/Уникальный не дают 4.5:1 с белым текстом.
     Для кнопок/ссылок/текста по акценту используем эти варианты. */
  --accent-legkiy-strong:     #2C6DB2; /* белый текст 5.3:1 ✓ */
  --accent-unikalniy-strong:  #A65E1A; /* как текст на белом 5.0:1 ✓ */
  --accent-fantastich-strong: #8B2E4F; /* база уже проходит 8.1:1 ✓ */

  /* Доступный цвет ТЕКСТА НА акцентном фоне (для карточек тарифов) */
  --on-legkiy:        #FFFFFF; /* на --accent-legkiy-strong */
  --on-unikalniy:     #1A1A1A; /* на оранжевом — ТЁМНЫЙ текст 7.1:1 ✓ */
  --on-fantastich:    #FFFFFF; /* на бордовом — белый 8.1:1 ✓ */

  /* Hover/active производные (затемнение на ~8% / ~16%) */
  --color-link-hover:            #1E5390;
  --color-link-active:           #18416F;
  --accent-legkiy-hover:         #245C99;
  --accent-legkiy-active:        #1C4A7C;
  --accent-unikalniy-hover:      #8C4E14;
  --accent-unikalniy-active:     #6F3E10;
  --accent-fantastich-hover:     #74263F;
  --accent-fantastich-active:    #5E1E33;

  /* Служебные */
  --color-warning:    #B07D00; /* «золотой» из ТЗ затемнён до AA 4.6:1 на белом */
  --color-border:     #E4E3E0; /* тонкая граница на фоне */
  --color-border-strong: #C9C7C2;
  --color-surface:    #FFFFFF; /* карточки поверх тёплого фона */

  /* ---------- ТИПОГРАФИКА: семейства (3 шт.) ---------- */
  --font-display: 'Playfair Display', Georgia, serif;        /* H1–H3 */
  --font-ui:      'Inter', system-ui, -apple-system, sans-serif; /* H4–H6, тело, UI */
  --font-accent:  'Cormorant Garamond', Georgia, serif;      /* цитаты, крупные метафоры */
  /* Montserrat убран: дублировал роль Inter, лишняя загрузка против LCP. */

  /* ---------- ТИПОГРАФИКА: шкала (fluid, mobile → desktop) ----------
     clamp(мин 375px, предпочт, макс 1440px). Тело 18px/1.6 (ТЗ §4.3). */
  --fs-h1:      clamp(2.125rem, 1.4rem + 3.1vw, 3.25rem);  /* 34 → 52px */
  --fs-h2:      clamp(1.75rem, 1.3rem + 1.9vw, 2.375rem);  /* 28 → 38px */
  --fs-h3:      clamp(1.375rem, 1.15rem + 0.95vw, 1.625rem);/* 22 → 26px */
  --fs-h4:      clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);/* 19 → 22px */
  --fs-h5:      1.1875rem; /* 19px */
  --fs-h6:      1.0625rem; /* 17px */
  --fs-body:    clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);  /* 17 → 18px */
  --fs-small:   1rem;      /* 16px — минимум на мобильном  */
  --fs-caption: 0.875rem;  /* 14px — подписи, мета         */

  --lh-tight:   1.1;   /* H1 */
  --lh-heading: 1.2;   /* H2–H3 */
  --lh-snug:    1.35;  /* H4–H6 */
  --lh-body:    1.6;   /* тело (ТЗ §4.3) */
  --lh-loose:   1.75;  /* длинные лонгриды/манифест */

  --measure:    68ch;  /* длина строки 65–75 симв. */
  --tracking-heading: -0.01em;
  --tracking-caps:    0.04em;

  /* ---------- SPACING (8pt scale) ---------- */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-9:  6rem;     /* 96px — вертикальные отступы секций */

  /* ---------- РАДИУСЫ ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ---------- ТЕНИ (мягкие, журнальные — не «материал») ---------- */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06);
  --shadow-md: 0 4px 12px rgba(26, 26, 26, 0.08);
  --shadow-lg: 0 12px 32px rgba(26, 26, 26, 0.10);
  /* Было 0.45 — кольцо давало 2.03:1 на белом при норме WCAG 1.4.11 = 3:1.
     0.8 даёт 4.00:1 на #FFFFFF и 3.54:1 на тёплом #F4F1EB. */
  --focus-ring: 0 0 0 3px rgba(37, 99, 168, 0.8); /* видимый фокус (ТЗ §6.5) */
  /* Граница интерактивных контролов. --color-border-strong (#C9C7C2) даёт
     1.69:1 — поля ввода и чекбоксы визуально не отделяются от фона. */
  --control-border: #85817A; /* 3.88:1 на белом, 3.44:1 на #F4F1EB ✓ */

  /* ---------- Z-INDEX (шкала) ---------- */
  --z-base:    10;
  --z-sticky:  20;  /* шапка таблицы тарифов */
  --z-nav:     30;  /* верхнее меню / моб. «Позвонить» */
  --z-overlay: 50;  /* лайтбокс портфолио */

  /* ---------- АНИМАЦИЯ (микро, 150–300ms) ---------- */
  --dur-fast:   150ms;
  --dur-base:   200ms;
  --dur-slow:   300ms;
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================
   БАЗОВАЯ ТИПОГРАФИКА
   ============================================================= */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* lining-nums обязателен: Playfair по умолчанию рисует старостильные цифры,
   и «10 минут» / «90% родкомов» читаются как «1o» и «9o». Весь оффер на числах. */
h1, h2, h3 { font-family: var(--font-display); letter-spacing: var(--tracking-heading); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum' 1; }
h4, h5, h6 { font-family: var(--font-ui); font-weight: 600; line-height: var(--lh-snug); }

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p { max-width: var(--measure); }

blockquote {
  font-family: var(--font-accent);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

.caption, figcaption { font-size: var(--fs-caption); color: var(--color-text-muted); }

a { color: var(--color-link); text-underline-offset: 0.15em; }
/* :not(.btn) обязателен: `a:hover` (0,1,1) перебивает `.btn--primary` (0,1,0),
   и текст ссылки-кнопки перекрашивался в цвет её же фона — контраст 1:1. */
a:not(.btn):hover { color: var(--color-link-hover); }
a:not(.btn):active { color: var(--color-link-active); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* =============================================================
   КНОПКИ — состояния hover / active / focus / disabled
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: var(--space-3) var(--space-5); /* touch-target ≥44px */
  font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 600;
  border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease);
}
.btn:focus-visible { box-shadow: var(--focus-ring); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }

/* Основная CTA */
.btn--primary { background: var(--color-link); color: #fff; }
.btn--primary:hover  { background: var(--color-link-hover); }
.btn--primary:active { background: var(--color-link-active); }

/* Второстепенная — обводка */
.btn--secondary { background: transparent; color: var(--color-link); border-color: var(--color-border-strong); }
.btn--secondary:hover { border-color: var(--color-link); color: var(--color-link-hover); }

/* Мессенджеры (фикс-цвета бренда — не из палитры сайта) */
/* ВКонтакте (S-22): фирменный #0077FF + белый ≈ 4.1:1 (провал AA). Затемнён в той
   же гамме до #006FE0 — белый текст 4.8:1 ✓ AA. */
.btn--vk { background: #006FE0; color: #fff; }
.btn--vk:hover  { background: #0061C2; }
.btn--vk:active { background: #0054A8; }
/* Telegram: фирменный #229ED9 + белый = всего 3.0:1 (провал AA). Затемнён в той же
   гамме до #176B97 — белый текст 5.8:1 ✓ AA (ТЗ §4.2, фикс color-contrast). */
.btn--telegram { background: #176B97; color: #fff; }
.btn--telegram:hover  { background: #135A80; }
.btn--telegram:active { background: #0F4A6B; }
/* MAX: фирменный циан #00D4FF + белый ≈ 1.6:1 (провал AA), градиент бренда —
   анти-референс. Затемнён в той же гамме до #007A99 — белый текст 4.95:1 ✓ AA. */
.btn--max { background: #007A99; color: #fff; }
.btn--max:hover  { background: #006A85; }
.btn--max:active { background: #00586E; }

/* Кнопки по тарифам — используем «усиленные» варианты (AA) */
.btn--legkiy     { background: var(--accent-legkiy-strong);     color: var(--on-legkiy); }
.btn--legkiy:hover  { background: var(--accent-legkiy-hover); }
.btn--legkiy:active { background: var(--accent-legkiy-active); }

.btn--unikalniy  { background: var(--accent-unikalniy);         color: var(--on-unikalniy); } /* тёмный текст на оранжевом */
.btn--unikalniy:hover  { background: var(--accent-unikalniy-hover);  color: #fff; }
.btn--unikalniy:active { background: var(--accent-unikalniy-active); color: #fff; }

.btn--fantastich { background: var(--accent-fantastich-strong); color: var(--on-fantastich); }
.btn--fantastich:hover  { background: var(--accent-fantastich-hover); }
.btn--fantastich:active { background: var(--accent-fantastich-active); }

/* Акцент как ТЕКСТ/ссылка по тарифу — только «strong»-варианты */
.text-legkiy    { color: var(--accent-legkiy-strong); }
.text-unikalniy { color: var(--accent-unikalniy-strong); }
.text-fantastich{ color: var(--accent-fantastich-strong); }

/* =============================================================
   Уважение к prefers-reduced-motion (ТЗ §6.5)
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}