/* ============================================================
   ABM Partner — БАЗОВЫЙ СЛОЙ
   1. Шрифты
   2. Токены дизайн-системы
   3. Сброс и корневые элементы
   4. Типографика
   5. Утилиты
   Порядок загрузки: base -> layout -> ui -> motion -> блоки
   ============================================================ */

/* ============================================================
   1. ШРИФТЫ
   Локальные variable-шрифты (бывший Google Fonts CDN).
   Источник: google/fonts (OFL-1.1): Golos Text wght 400-900, Jost wght 100-900.
   Файлы: fonts/golos-text-variable.woff2, fonts/jost-variable.woff2.
   Путь относительный от css/ -> ../fonts/.
   font-display: swap — текст читаем сразу, без «невидимой» фазы.
   ============================================================ */
@font-face {
    font-family: "Golos Text";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/golos-text-variable.woff2") format("woff2");
}

@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/jost-variable.woff2") format("woff2");
}

/* ============================================================
   1. ТОКЕНЫ
   Единственный источник значений: цвет, шрифт, кегль, отступ,
   радиус, тень, длительность, слой. Компоненты берут значения
   отсюда и не хардкодят числа повторно.
   ============================================================ */
:root {
    /* ===== Палитра текста =====
       Один смысл — один токен: тёмный текст на светлом и светлый на тёмном. */
    --color-ink: #241d12;          /* основной тёмный текст */
    --color-ink-soft: #615c54;     /* вторичный текст на светлом */
    --color-muted: #87837d;        /* приглушённый текст на светлом */
    --color-faint: #b2b0ac;        /* плейсхолдеры и мелкие подписи */
    --color-white: #ffffff;        /* белый текст */
    --color-white-soft: #e1e1e1;   /* светлый текст на тёмном */
    --color-white-faint: #808080;  /* самый тусклый светлый текст */
    --color-cream: #fbf5e9;        /* кремовый текст на тёмном */
    --color-cream-soft: #e2e2e2;   /* вторичный кремовый текст */
    --color-accent: #b07d3a;       /* акцент (бронза) */
    --color-accent-strong: #a68a66;/* акцент для текста/границ */
    --color-gold: #eab365;         /* золото (тёмный фон) */
    --color-error: #c0392b;

    /* ===== Поверхности и линии ===== */
    --color-bg: var(--color-white);
    --color-bg-tint: #f2f1f3;      /* серая подложка секций */
    --color-surface: #ffffff;
    --color-surface-alt: #fdfcf9;  /* поля форм */
    --color-surface-warm: #eee;    /* плашка подписи клиента */
    --color-surface-glass: rgba(255, 255, 255, 0.94); /* плашки поверх фото */
    --color-dark: #0f0d0a;         /* фон карточек услуг */
    --color-hero-bg: #000;         /* подложка первого экрана */
    --color-photo-bg: #e7e1d8;     /* заглушка под фото команды */
    --color-paper-top: #fdfcfa;    /* верхний лист «стопки» писем */
    --color-paper-bottom: #f1efeb; /* нижний лист «стопки» писем */
    --color-viewer-bg: #f4f1ec;    /* фон рамки просмотрщика PDF */
    --color-line: rgba(36, 29, 18, 0.14);
    --color-line-soft: rgba(36, 29, 18, 0.08);
    --color-line-faint: #eee;
    --color-line-strong: rgba(36, 29, 18, 0.28);
    --color-line-dashed: rgba(36, 29, 18, 0.18);
    --color-line-on-dark: rgba(255, 255, 255, 0.3);
    --color-overlay: rgba(20, 14, 7, 0.5);  /* затемнение под модалкой */
    --color-accent-wash: rgba(176, 125, 58, 0.14);
    --color-accent-soft: rgba(234, 179, 101, 0.14);
    --color-danger-wash: rgba(192, 57, 43, 0.08);
    --color-sticker: rgb(197, 178, 143);      /* бейдж PDF */
    --color-hero-bar: #ecbc78;               /* прогресс слайдера */
    --color-hero-plate: rgba(8, 17, 34, 0.72); /* плашка «предтайтла» героя */
    --color-paper-shadow: 0 0.0625rem 0.125rem rgba(20, 22, 30, 0.06), 0 1rem 1.75rem -1.25rem rgba(20, 22, 30, 0.3);
    --color-paper-shadow-hover: 0 0.125rem 0.25rem rgba(20, 22, 30, 0.06), 0 1.375rem 2.25rem -1.25rem rgba(20, 22, 30, 0.38);

    /* ===== Шрифты ===== */
    --font-sans: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-heading: "Jost", var(--font-sans);

    /* ===== Кегль (fluid, rem) =====
       Размеры заголовков плавно сжимаются от десктопа к мобиле
       без ступенчатых @media-правок. */
    --fs-2xs: 0.625rem;   /* 10px — переключатель языка */
    --fs-3xs: 0.6875rem;  /* 11px — бейджи, даты, служебные подписи */
    --fs-xs: 0.75rem;     /* 12px — предтайтлы, мета, бейджи, подписи */
    --fs-base: 0.9375rem; /* 15px — основной текст, UI, кнопки, формы */
    --fs-lg: 1.0625rem;   /* 17px — лонгриды */

    --fs-h1-hero: clamp(2.75rem, 1.55rem + 5vw, 3.625rem);  /* витринный h1 */
    --fs-h1: clamp(2.125rem, 1.5rem + 2.8vw, 3.5rem);        /* обычный h1 */
    --fs-h2: clamp(1.875rem, 1.35rem + 2.5vw, 3.25rem);
    --fs-h3: clamp(1.4rem, 1.2rem + 1vw, 2rem);
    --fs-h4: clamp(1.125rem, 1.05rem + 0.5vw, 1.5rem);
    --fs-h5: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
    --fs-h6: var(--fs-xs);

    /* ===== Интерлиньяж ===== */
    --lh-h1-hero: 0.98;
    --lh-h1: 1.05;
    --lh-h2: 1.1;
    --lh-h3: 1.2;
    --lh-h4: 1.25;
    --lh-h5: 1.3;
    --lh-h6: 1.4;
    --lh-base: 1.6;   /* абзацы, UI, формы */
    --lh-lg: 1.7;     /* лонгриды */
    --lh-ui: 1.5;     /* мелкий UI */
    --lh-tight: 1.4;  /* микроподписи, бейджи, роли */

    /* ===== Насыщенность ===== */
    --fw-h1-hero: 300;
    --fw-h1: 300;
    --fw-h2: 800;
    --fw-h3: 500;
    --fw-h4: 400;
    --fw-h5: 400;
    --fw-h6: 400;

    /* ===== Трекинг ===== */
    --ls-h1-hero: 0.005em;
    --ls-h1: 0.01em;
    --ls-h2: 0.015em;
    --ls-h3: 0.015em;
    --ls-h4: 0.02em;
    --ls-h5: 0.025em;
    --ls-h6: 0.03em;
    --ls-label: 0.12em;   /* бейджи, даты, рубрики */

    /* ===== Вертикальный ритм =====
       em-токены связывают пары «заголовок → текст» и «абзац → абзац»,
       clamp/rem-токены задают независимые интервалы между блоками. */
    --gap-pretitle: clamp(0.75rem, 1.4vw, 1rem);
    --gap-section-title-tight: clamp(0.75rem, 1.6vw, 1.5rem);
    --gap-section-title: clamp(2rem, 4vw, 2.625rem);
    --gap-text: 1em;
    --pad-section: clamp(4rem, 9vw, 7.5rem);
    --pad-inner-top: 2.6rem;      /* верх внутренней секции под полосой-героем */
    --gap-columns: clamp(2.5rem, 6vw, 5.5rem);
    --cols-feature: minmax(0, 1fr) minmax(0, 1fr);

    /* ===== Шкала отступов (кратна 4px, всё в rem) ===== */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* ===== Радиусы ===== */
    --radius-xs: 0.5rem;
    --radius-sm: 0.75rem;
    --radius-md: 1rem;
    --radius-lg: 1.375rem;
    --radius-xl: 1.75rem;
    --radius-2xl: 2rem;
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* ===== Тени ===== */
    --shadow-lg: 0 2rem 5rem rgba(20, 14, 7, 0.3);
    --shadow-paper: var(--color-paper-shadow);
    --shadow-paper-hover: var(--color-paper-shadow-hover);

    /* ===== Кривые и длительности ===== */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 0.25s;
    --dur-base: 0.35s;
    --dur-slow: 0.55s;
    --dur-reveal: 0.85s;   /* появление блока при скролле */

    /* ===== Слои ===== */
    --z-hero: 0;
    --z-section: 1;
    --z-header: 100;
    --z-modal: 900;
    --z-skip-link: 1000;

    /* ===== Геометрия ===== */
    --container-max: 82.5rem;  /* 1320px */
    --gutter: 1.5rem;
    --header-height: 4.25rem;  /* 68px */
    --header-offset: 1.25rem;  /* отступ фиксированной шапки сверху */
}

/* ============================================================
   2. СБРОС И КОРНЕВЫЕ ЭЛЕМЕНТЫ
   ============================================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-offset) + var(--header-height) + 1.25rem);
    overflow-x: hidden;
    overflow-x: clip;            /* прогрессивно: не создаёт scroll-контейнер */
    overscroll-behavior-y: none; /* без «резиновой ленты» и pull-to-refresh */
    background: #000;            /* страховка от мигания белым на iOS */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    color-scheme: light;
}

body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-ink);
    overflow-x: hidden;
    overflow-x: clip;
    overscroll-behavior-y: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Блокировка прокрутки страницы (модалки, мобильное меню).
   overflow: hidden на html убирает полосу прокрутки — компенсируем
   заранее, чтобы не было скачка раскладки. */
html.is-locked,
html.is-nav-locked {
    overflow: hidden;
}

body.is-locked,
body.is-nav-locked {
    overflow: hidden;
}

/* ============================================================
   3. ТИПОГРАФИКА
   Единый ритм h1–h6: fluid-кегль, интерлиньяж, насыщенность и
   трекинг берутся из токенов. Классы лишь уточняют роль.
   ============================================================ */
h1 {
    font-size: var(--fs-h1);
    font-weight: var(--fw-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
}
h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}
h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
}
h4 {
    font-size: var(--fs-h4);
    font-weight: var(--fw-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
}
h5 {
    font-size: var(--fs-h5);
    font-weight: var(--fw-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
}
h6 {
    font-size: var(--fs-h6);
    font-weight: var(--fw-h6);
    line-height: var(--lh-h6);
    letter-spacing: var(--ls-h6);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-ink);
    text-wrap: balance;   /* прогрессивно: ровные строки в заголовках */
}

p {
    font-size: var(--fs-lg);
    line-height: var(--lh-lg);
    color: var(--color-ink-soft);
}

b,
strong {
    font-weight: 500;
    color: var(--color-ink);
}

/* Абзац отбивается снизу; у последнего отступ снимается.
   :where() даёт нулевую специфичность — компоненты могут переопределить. */
:where(p):not(:last-child) {
    margin-block-end: var(--gap-text);
}

img {
    display: block;
    max-width: 100%;
}

svg {
    flex: none;
}

a {
    color: var(--color-accent-strong);
    text-decoration-thickness: 0.0625rem;
    text-underline-offset: 0.15em;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: none;
}

/* Формы наследуют шрифт сайта (иначе iOS/Safari подставляют свои) */
input,
textarea,
select,
button {
    font-family: var(--font-sans);
}

::selection {
    background: var(--color-accent-strong);
    color: var(--color-white);
}

/* ============================================================
   4. УТИЛИТЫ
   ============================================================ */

/* Ссылка «к содержимому» — первая в табуляции, скрыта до фокуса */
.skip-link {
    position: fixed;
    top: -5rem;
    left: var(--space-md);
    z-index: var(--z-skip-link);
    padding: 0.6rem 1.2rem;
    background: var(--color-white);
    color: var(--color-ink);
    font-size: var(--fs-base);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--radius-xs);
    box-shadow: 0 0.375rem 1.25rem rgba(0, 0, 0, 0.25);
    text-decoration: none;
    transition: top var(--dur-fast) ease;
}
.skip-link:focus {
    top: var(--space-md);
}

/* Акцентный фрагмент внутри предтайтла */
.accent {
    color: var(--color-accent-strong);
}

/* Заголовки-утилиты: роль важнее уровня тега */
.type-h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

.type-h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
}

/* Скрыто визуально, доступно скринридерам */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}