/* ============================================================
   theme.css – токены финального сайта (Виктория Гончарова)
   Смелый · современный · светлый · киноварь-акцент · гротеск.
   Тёмная тема – АВТОРСКАЯ (через prefers-color-scheme), чтобы браузер
   не инвертировал сам. color-scheme: light dark включает её.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* --- Светлая (по умолчанию) --- */
  --paper:     #f6f2e8;   /* тёплый светлый фон */
  --surface:   #fffdf8;   /* карточки */
  --surface-2: #efe9db;
  --ink:       #1c1814;   /* текст */
  --muted:     #6f6659;   /* приглушённый (контраст к бумаге 5.05 – норма 4.5; было #7a7061 = 4.35) */
  --line:      #e6ddcc;
  --line-2:    #d8cdb8;
  --red:       #cf3a26;   /* КИНОВАРЬ – фирменный акцент */
  --red-deep:  #a52a1b;
  --gold:      #c2913a;
  --on-red:    #fdf6ea;   /* текст на красном */

  --font-display: "Onest", -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Onest", -apple-system, "Segoe UI", Roboto, sans-serif;

  --maxw: 1280px;
  --pad:  clamp(20px, 5vw, 72px);
  --radius: 14px;
  /* Один зазор на все сетки главной: плитки направлений, работы, магазин, отзывы.
     Раньше у каждой был свой (18/20/28) и на глаз это выглядело неаккуратно.
     Карусель отзывов читает это значение из вёрстки, а не хранит своё число. */
  --grid-gap: clamp(12px, 1.6vw, 20px);
  /* Шкала вертикальных отступов – одна на весь сайт. Каждая ступень ужимается
     к телефону в той же пропорции, что заголовки и поля секций (58 → 34).
     Раньше отступы задавались числами (56, 44, 30, 26, 32) и на узком экране
     оставались прежними, хотя всё вокруг уменьшалось. */
  --gap-lg: clamp(30px, 4.5vw, 56px);   /* крупный разделитель внутри страницы */
  --gap-md: clamp(26px, 4vw,   44px);   /* заголовок секции → содержимое */
  --gap-sm: clamp(15px, 1.6vw, 20px);   /* ряд кнопок – тем же шагом, что строки текста над ними */
  --gap-xs: clamp(18px, 2.4vw, 26px);   /* плашки, альбом */
  /* Внутренние поля карточек – одни на все: плитки разделов, публикации ленты,
     отзывы, контакты, фрагменты «Литературы». Было пять разных пар (22/24,
     24/24, 20/22, 18/20, 24/20), и ни одна не ужималась на телефоне. */
  --card-pad-y: clamp(16px, 1.7vw, 22px);
  --card-pad-x: clamp(18px, 1.9vw, 24px);
  /* Отступ под плашкой-надзаголовком («О себе», «Направление 03», «Свяжитесь»).
     Было три разных значения: 20 на Главной (вписано в разметку), 14 в шапке
     страницы, 16 в подвале. */
  --eyebrow-gap: clamp(15px, 1.6vw, 20px);   /* тот же шаг, что у строк текста и рядов кнопок */
  /* Шаг между строками текста в шапках (заголовок → описание). Один и на Главной,
     и на страницах: раньше здесь стояло фиксированное 20px, которое не ужималось. */
  --gap-text: clamp(15px, 1.6vw, 20px);
  /* Кадр карточек главной – один на плитки разделов, работы и товары магазина.
     Постоянное соотношение важнее «подогнать высоту»: изображения подбираются
     под него, и на телефоне должно обрезаться ровно так же, как на большом экране.
     Горизонтальный: работы чаще всего горизонтальные. */
  --card-ratio: 3/2;
  --card-ratio-v: 2/3;   /* вертикальная сетка карточек – обложки книг, портретные работы */
  /* Кадр медиа в ленте (там, где снимок обрезается). Считано по 58 снимкам ленты:
     вертикальных 40, горизонтальных 15, медиана 0,75. При 4:3 сильно обрезались
     40 снимков из 58, при 4:5 – девять, при 1:1 – четырнадцать.
     Взят квадрат: 4:5 давал слишком высокие плитки – сетка из девяти кадров
     вытягивалась в длинную ленту и выглядела тяжело. */
  --feed-ratio: 1/1;
  /* Кадр карусели работ. Считано по 130 снимкам альбомов: горизонтальных 76,
     вертикальных 50 – вперемешку. Квадрат честнее ко всем: при 4:3 сильно
     обрезалась 51 работа, при 1:1 – одиннадцать. */
  --album-ratio: 1/1;
  /* Пределы крупного кадра в ленте (первый снимок в режиме «авто»). Он показывается
     целиком, пока укладывается в них; выходящее за пределы обрезается, а не ужимается.
     Значения – доли ширины кадра: 125% ≈ 4:5 (выше не растём), 56% ≈ 16:9 (площе не становимся). */
  --lead-max-h: 125cqw;
  --lead-min-h: 56cqw;
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #17130e;
    --surface:   #201a13;
    --surface-2: #29221a;
    --ink:       #f3ede0;
    --muted:     #a99d89;
    --line:      #322a20;
    --line-2:    #40372b;
    --red:       #ec583f;   /* чуть ярче на тёмном */
    --red-deep:  #cf4230;
    --gold:      #d8b158;
    --on-red:    #17130e;
  }
}

/* --- Ручной выбор темы (кнопка ☀/☾ в шапке) – перекрывает системную --- */
:root[data-theme="light"]{
  color-scheme: light;
  --paper:#f6f2e8; --surface:#fffdf8; --surface-2:#efe9db; --ink:#1c1814; --muted:#6f6659;
  --line:#e6ddcc; --line-2:#d8cdb8; --red:#cf3a26; --red-deep:#a52a1b; --gold:#c2913a; --on-red:#fdf6ea;
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#17130e; --surface:#201a13; --surface-2:#29221a; --ink:#f3ede0; --muted:#a99d89;
  --line:#322a20; --line-2:#40372b; --red:#ec583f; --red-deep:#cf4230; --gold:#d8b158; --on-red:#17130e;
}

/* Подвал зашит тёмным (#1c1814) и на тёмном фоне сливается с --paper.
   В тёмной теме добавляем тонкий разделитель сверху, чтобы читался как отдельная полоса. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .site-footer{ border-top:1px solid var(--line-2); }
}
:root[data-theme="dark"] .site-footer{ border-top:1px solid var(--line-2); }