/*
 * Дизайн-токены, вариант A («Белый лист»).
 * Все значения перенесены из макетов (design/). Компоненты берут цвета, отступы,
 * размеры и длительности только отсюда.
 */

:root {
  /* Цвета: светлая тема — по умолчанию. */
  color-scheme: light;
  --bg: #F7F7F5;       /* фон страницы */
  --surface: #FFFFFF;  /* панели, кнопки */
  --text: #141414;     /* основной текст */
  --muted: #5C5C57;    /* подписи, метки */
  --line: #E2E2DD;     /* разделители */
  --accent: #C2410C;   /* акцент, фокус */
  --photo: #ECECE8;    /* подложка карточки фото и скелетона */
  --stage: #ECECE8;    /* фон сцены на странице фотографии */

  /* Отступы: шкала дизайн-системы с шагом 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-photo: 0;     /* фото — всегда без скругления */
  --radius-field: 6px;   /* поля, панели */
  --radius-full: 999px;  /* чипы, круглые кнопки */

  /* Движение. */
  --duration-photo: 240ms;  /* появление снимка */
  --duration-theme: 160ms;  /* смена темы: фон и текст */

  /* Шрифты. */
  --font-sans: "Golos Text", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --font-size-10: 0.625rem;
  --font-size-11: 0.6875rem;
  --font-size-12: 0.75rem;
  --font-size-13: 0.8125rem;
  --font-size-14: 0.875rem;
  --font-size-15: 0.9375rem;
  --font-size-16: 1rem;
  --font-size-17: 1.0625rem;
  --font-size-18: 1.125rem;
  --font-size-22: 1.375rem;
  --font-size-32: 2rem;
  --font-size-64: 4rem;

  --line-height-ui: normal;  /* подписи и элементы интерфейса в одну строку */
  --line-height-text: 1.55;  /* абзацы */

  --line-height-caption: 1.4;  /* подпись под фото */
  --line-height-compact: 1.5;  /* короткий текст в колонке «о себе» */
  --line-height-list: 1.6;     /* перечень в моноширинном шрифте */
  --line-height-display: 1.02; /* заголовок вступления */
  --line-height-display-phone: 1.05;

  --letter-spacing-tight: -0.01em;
  --letter-spacing-label: 0.04em;    /* подпись колонки «о себе» */
  --letter-spacing-eyebrow: 0.08em;  /* надпись над заголовком */
  --letter-spacing-display: -0.035em;
  --letter-spacing-display-phone: -0.03em;

  /* Линии, фокус, элементы управления. */
  --border-width: 1px;
  --focus-ring-width: 2px;
  --focus-ring-offset: var(--space-1);
  --control-size: 44px;  /* минимальная область нажатия */
  --layer-top: 100;

  /* Контейнер: поля 16 px до 640 px, 32 px на 641–1024 px, от 1025 px растут с 34 до 48 px. */
  --container-max: 1680px;
  --container-gutter: var(--space-4);

  /* Шапка и футер: значения макета, которых нет в именованной шкале. */
  --header-padding-block: 20px;
  --brand-gap: 10px;
  --footer-padding-top: var(--space-5);
  --footer-padding-bottom: 40px;

  /* Главная страница: значения макета, которых нет в именованной шкале. */
  --intro-padding-top: 72px;
  --intro-padding-bottom: 0;
  --intro-gap: 56px;
  --intro-text-gap: var(--space-5);
  --intro-title-max-width: 900px;
  --intro-lead-max-width: 620px;
  /* В макете 240 px. Чуть меньше, чтобы на 1025 px (контейнер 957 px) четыре колонки ещё помещались в одну строку. */
  --about-column-min: 232px;
  --about-item-gap: 10px;
  --about-item-padding-top: 18px;
  --about-item-padding-bottom: 28px;
  --about-item-padding-inline: 20px;
  --about-pair-padding: 10px;  /* телефон: отступ второй колонки пары от линии */
  --feed-gap: var(--space-3);  /* между карточками ряда */
  --feed-row-gap: 40px;        /* между рядами */
  --feed-padding-top: 40px;
  --feed-padding-bottom: var(--space-8);
  --card-gap: 10px;            /* между фото, строкой места и подписью */
  --card-meta-gap: var(--space-3);
  --card-icon-gap: 6px;
  --photo-hover-opacity: 0.9;

  /* Подгрузка ленты и лоадер первой загрузки (MAI-73): значения макетов «A · Главная» и «Дизайн-система». */
  --loader-min-height: 760px;
  --loader-gap: var(--space-5);
  --loader-text-gap: var(--space-3);
  --loader-bar-width: 240px;
  --loader-bar-height: 2px;
  --loader-bar-from: 8%;
  --loader-bar-to: 88%;
  --loader-bar-static: 62%;          /* без движения полоса стоит, как в компоненте дизайн-системы */
  --skeleton-ratio-wide: 1.33;
  --skeleton-ratio-mid: 1.5;
  --skeleton-ratio-tall: 0.8;
  --skeleton-gap: var(--space-4);    /* между рядом блоков и подписью */
  --skeleton-shimmer-size: 800px;    /* ширина градиента; бегунок идёт от -50% до +50% этой ширины */
  --skeleton-shimmer-shift: 400px;
  --duration-spin: 1.6s;             /* оборот диафрагмы лоадера */
  --duration-shimmer: 1.4s;          /* проход блика по скелетону */
  --duration-bar: 2.4s;              /* заполнение полосы лоадера */
  --sentinel-lead: 600px;            /* за сколько до скелетона сторож просит следующую порцию */

  /* Страница фотографии (MAI-72): значения макетов «A · Фотография» и «A · Телефон», которых нет в шкале. */
  --font-size-24: 1.5rem;
  --font-size-34: 2.125rem;
  --line-height-title: 1.1;
  --line-height-title-phone: 1.15;
  --letter-spacing-title: -0.02em;
  --letter-spacing-section: 0.06em;  /* заголовок «ПАРАМЕТРЫ СЪЁМКИ · EXIF» */
  --photo-page-gap: 40px;            /* между сценой и панелью */
  --photo-page-padding-top: var(--space-6);
  --photo-page-padding-bottom: var(--space-8);
  --photo-scene-flex: 999 1 640px;   /* сцена забирает всю свободную ширину */
  --photo-panel-flex: 1 0 340px;     /* панель уже 340 px не бывает: в плитке не помещалось бы «1/8000»; сжимается сцена */
  --photo-panel-max-width: 520px;
  --photo-panel-gap: var(--space-6);
  --photo-head-gap: 14px;
  --photo-meta-gap: 20px;
  --back-gap: 10px;                  /* между стрелкой и надписью «Все фотографии» */
  /*
   * Сцена: высота на широком экране — 74.5% высоты окна (820 px при окне 1100 px в макете), но не меньше
   * и не больше пределов; снимок вписан в 86% × 88% сцены (так в макете). На телефоне высоту сцены задаёт
   * сам снимок, но не выше 70% высоты окна.
   */
  --stage-height-min: 480px;
  --stage-height-max: 1100px;
  /* Нижний предел не выше 80% окна: в альбомной ориентации телефона (390 px высоты) сцена в 480 px не помещалась бы на экран. */
  --stage-height: clamp(min(var(--stage-height-min), 80vh), 74.5vh, var(--stage-height-max));
  --stage-fit-width: 86%;
  --stage-fit-height: 88%;
  --stage-phone-max-height: 70vh;
  --stage-placeholder-ratio: 1.5;
  --stage-nav-size: 48px;
  --stage-nav-offset: 20px;
  --key-padding-block: 14px;
  /* В макете 12 px; при 8 px помещается «1/4000» (18 px моноширинным) в плитке шириной 340 px. */
  --key-padding-inline: var(--space-2);
  --exif-row-padding: 11px;
  --exif-row-gap: var(--space-5);

  /* Зум снимка (MAI-74): значения макета «A · Фотография» и «A · Телефон», которых нет в шкале. */
  --duration-zoom: 240ms;             /* масштаб и смещение снимка */
  --zoom-bar-gap: 2px;                /* между кнопками панели */
  --zoom-value-width: 52px;           /* ширина надписи «100%», чтобы кнопки не прыгали */
  --zoom-divider-height: 24px;
  --zoom-disabled-opacity: 0.4;       /* кнопка на краю шкалы масштаба */
  --stage-hint-offset: 10px;
  --stage-hint-padding: 5px 10px;
  --visually-hidden-size: 1px;        /* панель на телефоне без фокуса: скрыта, как .visually-hidden */
  --visually-hidden-clip: inset(50%);
  --stage-full-fit: 100%;            /* в полном экране снимок вписан во всю сцену, без полей */
  --hint-bg: rgba(0, 0, 0, 0.6);      /* подсказка поверх снимка: одинакова в обеих темах, как в макете */
  --hint-text: #FFFFFF;
}

/* Границы 640/641 и 1024/1025 записаны как 640 и 640.02, 1024 и 1024.02: классический синтаксис понимает и Safari до 16.4, а дробная граница не оставляет ширины 640.5 px без правил. Не 0.01: Chrome сравнивает с точностью 1/64 px и считает 640.01 равным 640 (на 640 px действовали бы оба правила). Щель 0.02 px недостижима: ширина окна кратна 1/DPR. */
@media (min-width: 640.02px) {
  :root {
    --container-gutter: var(--space-6);
  }
}

/* Телефон: значения главной страницы из мобильного макета. */
@media (max-width: 640px) {
  :root {
    --intro-padding-top: 28px;
    --intro-padding-bottom: 14px;  /* вместе с 10 px под колонками «о себе» это 24 px макета */
    --intro-gap: 18px;
    --intro-text-gap: 14px;
    --about-item-gap: var(--space-1);
    --about-item-padding-top: 10px;
    --about-item-padding-bottom: 10px;
    --feed-gap: 28px;
    --feed-row-gap: 28px;
    --feed-padding-top: 20px;
    --card-gap: var(--space-2);

    /* Страница фотографии: значения мобильного макета. */
    --photo-page-padding-top: 0;
    --photo-page-padding-bottom: 0;
    --photo-page-gap: 0;  /* сцена и текст вплотную: 20 px между ними даёт отступ панели */
    --photo-panel-gap: 20px;
    --photo-info-padding-block: 20px;
    --photo-head-gap: var(--space-2);
    --key-padding-block: 10px;
    --exif-row-padding: 9px;
  }
}

/*
 * iOS Safari: vh — высота окна с убранной адресной строкой, пока она на экране, сцена в 74.5vh и снимок в 70vh
 * получались бы выше видимой области. svh — высота при показанной строке; где единицы нет, остаются vh выше.
 */
@supports (height: 1svh) {
  :root {
    --stage-height: clamp(min(var(--stage-height-min), 80svh), 74.5svh, var(--stage-height-max));
    --stage-phone-max-height: 70svh;
  }
}

@media (min-width: 1024.02px) {
  :root {
    /* Тридцатая часть ширины окна: 34 px на 1025 px, 48 px на ширине макета 1440 px и дальше. */
    --container-gutter: min(100vw / 30, var(--space-7));
  }
}

/*
 * Тёмная тема включается двумя путями: по системной настройке (если на <html>
 * нет data-theme="light") и принудительно через data-theme="dark".
 * Оба блока ниже должны совпадать — это проверяет тест.
 *
 * --photo в макетах тёмной темы задан по-разному: #1E1E1C в дизайн-системе и на
 * главной, #151513 на странице фотографии. Здесь --photo — подложка карточки и
 * скелетона, поэтому взято #1E1E1C. Фон сцены на странице фотографии в макете
 * темнее, поэтому у него отдельный токен --stage (MAI-72): в тёмной теме #151513, в светлой
 * тот же #ECECE8, что у --photo. Подложку карточки не трогаем, чтобы лента не потемнела.
 */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0F0F0E;
    --surface: #191917;
    --text: #EDEDE9;
    --muted: #A3A39C;
    --line: #2C2C29;
    --accent: #FF8A5B;
    --photo: #1E1E1C;
    --stage: #151513;
    --hint-bg: rgba(0, 0, 0, 0.6);
    --hint-text: #FFFFFF;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F0F0E;
  --surface: #191917;
  --text: #EDEDE9;
  --muted: #A3A39C;
  --line: #2C2C29;
  --accent: #FF8A5B;
  --photo: #1E1E1C;
  --stage: #151513;
  --hint-bg: rgba(0, 0, 0, 0.6);
  --hint-text: #FFFFFF;
}