@charset "UTF-8";
/* ДИЗАЙН-ТОКЕНЫ ТЕМЫ ONLYSKODA
   Правь здесь — меняется во всем проекте.
   Компоненты используют только var(--os-*), никаких сырых значений. */

:root {
  /* Цвета */
  --os-green:       #34AB72;
  --os-green-press: #268A5A;
  --os-green-soft:  rgba(52, 171, 114, .12);
  --os-green-line:  rgba(52, 171, 114, .34);

  /* Линза «Открыто» в шапке: стекло с бликом и кольцами Френеля */
  --os-lens-on:     radial-gradient(circle at 35% 30%, #D6FFE9 0 10%, #5AD69A 32%, #34AB72 62%, #1D7A4E 100%);
  --os-lens-on-sh:  0 0 0 1px #238A5A;
  --os-lens-glow:   0 0 8px 2px rgba(52, 171, 114, .5);
  --os-lens-off:    radial-gradient(circle at 35% 30%, #EEF1EF 0 10%, #BCC4C0 40%, #8F9994 100%);
  --os-lens-off-sh: 0 0 0 1px #9AA39F;
  --os-lens-rings:  repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .22) 0 1px, transparent 1px 3px);

  /* Желтый ТОЛЬКО для целевого действия (кнопки записи) */
  --os-gold:        #FFD84F;
  --os-gold-press:  #F5C92E;
  --os-gold-soft:   rgba(255, 216, 79, .20);

  /* Текст и фон */
  --os-black:       #000000;
  --os-ink:         #16181D;
  --os-ink-2:       #1F232B;
  --os-paper:       #FFFFFF;
  --os-paper-2:     #F3F4F1;
  --os-paper-3:     #ECEEE9;
  /* Зеленоватая подложка блоков внутренних страниц: плашка, как у «Моделей» */
  --os-tint:        #F1F4F0;
  --os-tint-2:      #E9EEE9;
  --os-tint-grad:   linear-gradient(160deg, #F4F6F3 0%, #E9EEE9 100%);
  --os-line:        #E4E5E0;
  /* Шкала графика обслуживания: зеленый пунктир дорожки и направляющих */
  --os-line-dash:   #9CD3B6;
  /* Пунктир строки без пробега: дорожка и направляющие серые */
  --os-line-grey:   #C9CFCB;
  --os-on-paper:    #1A1C21;
  --os-muted:       #6A6E76;
  --os-dim:         #9AA0A6;
  --os-grey-soft:   rgba(129, 129, 129, .12);

  /* Фирменные цвета чужих сервисов: плашки иконок в карточках каналов */
  --os-brand-tg:    #2AABEE;

  /* Ошибки форм */
  --os-error:       #FF5C5C;
  --os-error-line:  rgba(255, 92, 92, .7);
  --os-error-soft:  rgba(255, 92, 92, .08);

  /* Отступы (шкала кратная 4px) */
  --os-space-3xs:  4px;
  --os-space-2xs:  8px;
  --os-space-xs:  12px;
  --os-space-sm:  16px;
  --os-space-md:  24px;
  --os-space-lg:  32px;
  --os-space-xl:  48px;
  --os-space-2xl: 64px;
  --os-space-3xl: 80px;

  /* Высота прилипшей шапки: от нее отсчитываются липкие колонки,
     иначе шапка наезжает на них при прокрутке. Липнет шапка целиком,
     поэтому в высоту входит и верхняя строка: 52 плюс 60. */
  --os-header-h: 112px;

  /* Нижняя панель на телефоне без отступа под жест «домой»: 6 + 56 + 16. */
  --os-dock-h: 61px;

  /* Шаг между блоками страницы. Задается блоку сверху, снизу у блока нули —
     иначе соседние отступы складываются и получается дыра. */
  --os-section: 64px;

  /* Кегль h1 страниц и архивов. На телефоне меньше: 36px давали
     заголовок в четыре-пять строк на первом экране. */
  --os-h1: 36px;

  /* Радиусы */
  --os-r-card: 26px;
  --os-r-lg:   20px;
  --os-r-md:   12px;
  --os-r-sm:    9px;

  /* Максимальная ширина контейнера */
  --os-shell: 1360px;

  /* Боковая колонка листинга работ и страницы кейса: ширина у них общая,
     иначе два соседних экрана разъезжаются по сетке. */
  --os-aside: 320px;

  /* Сетка блоков: 12 колонок с промежутком --os-gutter по ширине контейнера.
     --os-span-N — ширина N колонок вместе с промежутками между ними.
     Процент считается от сетки, где токен подставлен, поэтому токены
     работают только в сетке, которая занимает контейнер целиком.
     На 1320px колонка 88px: span-3 = 312, span-4 = 424, span-8 = 872. */
  --os-gutter: 24px;
  --os-span-3: calc((100% - 11 * var(--os-gutter)) / 4 + 2 * var(--os-gutter));
  --os-span-4: calc((100% - 11 * var(--os-gutter)) / 3 + 3 * var(--os-gutter));

  /* Правая колонка блоков страницы: карточка звонка в «Описании», колонка
     рядом с самопроверкой, смета в «Ценах» и карточка в «Тексте» —
     четыре колонки сетки, граница у всех блоков в одном месте. */
  --os-rail: var(--os-span-4);

  /* Брейкпоинты (используются в media-запросах через env или комментарии) */
  /* sm: 480px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1440px */

  /* Типографика */
  --os-font-title: 'Onest', 'Onest Fallback', 'Onest Fallback Roboto', sans-serif;
  --os-font-text:  'Montserrat', 'Montserrat Fallback', 'Montserrat Fallback Roboto', sans-serif;
  --os-font-num:   'Montserrat', 'Montserrat Fallback', 'Montserrat Fallback Roboto', sans-serif;

  --os-text-xs:   0.75rem;   /* 12px */
  --os-text-sm:   0.875rem;  /* 14px */
  --os-text-base: 1rem;      /* 16px */
  --os-text-lg:   1.125rem;  /* 18px */
  --os-text-xl:   1.25rem;   /* 20px */
  --os-text-2xl:  1.5rem;    /* 24px */
  --os-text-3xl:  1.875rem;  /* 30px */
  --os-text-4xl:  2.25rem;   /* 36px */
  --os-text-5xl:  3rem;      /* 48px */

  --os-leading-tight:  1.2;
  --os-leading-normal: 1.5;
  --os-leading-loose:  1.7;

  /* Переходы */
  --os-duration-fast: 150ms;
  --os-duration-base: 250ms;
  --os-ease: cubic-bezier(.4, 0, .2, 1);

  /* Тени */
  --os-shadow-sm:  0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --os-shadow-md:  0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
  --os-shadow-lg:  0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.05);
  --os-shadow-pop: 0 12px 32px rgba(16,20,26,.12), 0 2px 6px rgba(16,20,26,.06);

  /* Кегли выпадашки поиска */
  --os-fs-result: 15px;
  --os-fs-meta:   12.5px;
  --os-fs-cap:    11px;
}

/* На телефоне липнет только строка меню: 12 + 44 + 12 и линия сверху. */
@media (max-width: 1023px) {
  :root { --os-header-h: 69px; }
}

@media (max-width: 900px) {
  :root { --os-section: 44px; }
}

@media (max-width: 700px) {
  :root { --os-h1: 28px; }
}

/* Анимации отключаются при prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important; /* a11y overrides — намеренно */
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}