/* ==========================================================================
   Компания 2000: дизайн-токены (основа: токены Транзит-Плюс v1.0)
   Одна система, две темы: light (по умолчанию) и dark через data-theme
   на любом элементе. Отличие от Транзита: акцент оранжевый, а не синий.
     --brand          #DE5316  плоскости, крупные цифры и декор от 24 px
     --brand-text     #B83F0D  ссылки, мелкий текст, кнопки с белым текстом
     --brand-on-dark  #F0703A  оранжевый для тёмного фона (>= 4.5:1)
   Шрифт Onest лежит локально (см. @font-face в css/site.css), внешних шрифтов нет.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. ПРИМИТИВЫ. В вёрстке напрямую не используются, только через семантику.
   -------------------------------------------------------------------------- */
:root {
  /* Нейтральная шкала: чуть холодный графит, без синевы и без «тёплого беж». */
  --p-white:   #ffffff;
  --p-paper-2: #f4f4f2;   /* светлая подложка под картой/таблицей, единственный «тон» на белом */
  --p-g-100:   #e3e5e7;
  --p-g-200:   #d0d3d6;
  --p-g-300:   #b7bbbf;   /* только линии: структурная линейка светлой темы */
  --p-g-400:   #8a8f94;   /* только декоративно: < 4.5:1 на белом */
  --p-g-500:   #6b7075;   /* 5.0:1 на белом */
  --p-g-600:   #55595e;   /* 7.1:1 на белом */
  --p-g-900:   #0a0a0a;
  --p-ink-0:   #0b0d0e;   /* футер, контакты в тёмной теме */
  --p-ink-1:   #0f1113;   /* фон тёмной темы */
  --p-ink-2:   #171a1d;   /* табло цен */
  --p-ink-3:   #1e2124;   /* подложка фото, карта */
  --p-fog-1:   #eceef0;   /* 16.3:1 на ink-1 */
  --p-fog-2:   #a2a8ae;   /*  7.9:1 */
  --p-fog-3:   #868c92;   /*  5.6:1 (было #6f767d = 4.1:1, не проходило AA) */

  /* Оранжевый «Компании 2000»: цвет логотипа и навесов АЗС (#DE5316).
     Синий логотипа (#393185) в интерфейсе не используется. */
  --p-orange-500: #de5316;  /* 3.9:1 на белом: плоскости, текст от 24 px */
  --p-orange-600: #b83f0d;  /* 5.6:1 на белом: ссылки, мелкий текст, кнопки с белым текстом */
  --p-orange-700: #963208;  /* нажатие */
  --p-orange-300: #f0703a;  /* >= 4.5:1 на ink-1: оранжевый для тёмного фона */
  --p-orange-100: #fbe6dc;

  /* Сигнальный красный. Не бренд, а сигнал: ошибка, «цена изменилась»,
     толстая линейка над ценами в светлой теме. */
  --p-red-500: #c8281e;   /* 5.6:1 на белом */
  --p-red-300: #f0645a;   /* 6.0:1 на ink-1 */
}


/* Бренд-переменные: одни и те же в любой теме. */
:root {
  --brand:         var(--p-orange-500);
  --brand-text:    var(--p-orange-600);
  --brand-on-dark: var(--p-orange-300);
  --btn-press:     var(--p-orange-700);  /* hover/нажатие оранжевой кнопки с белым текстом, в любой теме */
}


/* --------------------------------------------------------------------------
   2. ТИПОГРАФИКА
   Onest: кириллица нарисована вместе с латиницей, вариативный 100–900,
   есть tnum/lnum. Оптического размера в шрифте нет, поэтому «оптику» делаем
   сами: у каждой ступени свой вес, трекинг и интерлиньяж.
   Шкала: 17 px × 1.25 (большая терция). Ступени ≥ 4 резиновые (clamp 390→1440).
   -------------------------------------------------------------------------- */
:root {
  --font-sans: "Onest", "Golos Text", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-features: "kern", "liga", "calt";
  --font-num: tabular-nums lining-nums;

  --w-light: 300;   /* только цифры ≥ 56 px: цены, «2000» */
  --w-reg:   400;
  --w-med:   500;   /* заголовки, кнопки, телефон */
  --w-semi:  600;   /* не для заголовков; только микро-подписи на фото */

  /*            размер                                  интерлиньяж     трекинг   */
  --t-micro:   13px;                                   --lh-micro: 1.4;  --tr-micro: .01em;
  --t-small:   15px;                                   --lh-small: 1.47; --tr-small: .003em;
  --t-body:    17px;                                   --lh-body: 1.58;  --tr-body: 0;
  --t-lead:    clamp(18px, 1.05rem + .25vw, 21px);     --lh-lead: 1.48;  --tr-lead: -.005em;
  --t-h4:      clamp(20px, 1.1rem + .55vw, 26px);      --lh-h4: 1.25;    --tr-h4: -.012em;
  --t-h3:      clamp(24px, 1.2rem + .95vw, 33px);      --lh-h3: 1.16;    --tr-h3: -.018em;
  --t-h2:      clamp(32px, 1.4rem + 2.2vw, 52px);      --lh-h2: 1.05;    --tr-h2: -.028em;
  --t-h1:      clamp(40px, 1.2rem + 4.6vw, 81px);      --lh-h1: 1.0;     --tr-h1: -.036em;
  --t-display: clamp(42px, 1rem + 6.4vw, 101px);       --lh-display: .97;--tr-display: -.042em;
  --t-figure:  clamp(56px, 2rem + 6.4vw, 112px);       --lh-figure: .9;  --tr-figure: -.04em;   /* цены, годы */
  --t-figure-s:clamp(26px, 1.2rem + 1.1vw, 36px);      --lh-figure-s: 1; --tr-figure-s: -.022em; /* полоса цен */

  --measure:        62ch;   /* максимум строки основного текста */
  --measure-lead:   44ch;
  --measure-title:  16ch;   /* h1/display: 2–3 строки, не больше */
}


/* --------------------------------------------------------------------------
   3. ПРОСТРАНСТВО, СЕТКА, БРЕЙКПОИНТЫ
   База 4 px. В медиазапросах переменные не работают, поэтому брейкпоинты
   зафиксированы числом (см. DESIGN-SYSTEM.md §4):
     xs < 600  · sm 600–899  · md 900–1199  · lg 1200–1439  · xl ≥ 1440
   -------------------------------------------------------------------------- */
:root {
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 20px;
  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;  --s-9: 48px;  --s-10: 64px;
  --s-11: 80px; --s-12: 96px; --s-13: 128px; --s-14: 176px;

  /* Ритм секций: один на всю страницу, не подбирается «на глаз» по блокам. */
  --space-section:  clamp(88px, 4rem + 6.5vw, 176px);
  --space-block:    clamp(48px, 2rem + 3.6vw, 96px);   /* между подблоками внутри секции */
  --space-head:     clamp(40px, 1.5rem + 3.4vw, 80px); /* заголовок секции → содержимое */

  --grid-cols:   4;
  --grid-gutter: 16px;
  --grid-margin: 16px;
  --grid-max:    1440px;              /* контент; фото может выходить в край */

  --hdr-h: 60px;
  --tap:   44px;                       /* минимальная зона нажатия */
}
@media (min-width: 600px)  { :root { --grid-cols: 8;  --grid-gutter: 20px; --grid-margin: 32px; } }
@media (min-width: 900px)  { :root { --grid-cols: 12; --grid-gutter: 24px; --grid-margin: 40px; --hdr-h: 72px; } }
@media (min-width: 1440px) { :root { --grid-gutter: 32px; --grid-margin: 64px; } }


/* --------------------------------------------------------------------------
   4. ФОРМА: линии, радиусы, тени, слои
   -------------------------------------------------------------------------- */
:root {
  --line-w: 1px;
  --line-w-strong: 2px;       /* подчёркивание телефона, активный пункт */
  --line-w-signal: 3px;       /* одна линейка над ценами, одна на страницу */

  /* Компания 2000: вместо «радиус 0» Транзита — один небольшой радиус (решение пользователя 21.10.2026, спецификация §4.1).
     --radius — фото, кнопки, плашка QR, карта; --radius-s — кольцо фокуса, мелкие плашки, концы линеек. */
  --radius: 6px;
  --radius-s: 4px;
  --scrim-rgb: 15 17 19;      /* затемнение фото первого экрана: графит тёмной темы, прозрачность — в site.css */
  --photo-outline: rgb(10 10 10 / .08); /* тонкий контур снежных фото на белом поле */
  --radius-round: 50%;        /* только точка на карте */
  --radius-panel: 24px;       /* крупное скругление панели; сейчас не используется (блок «Заправка с телефона» без панели) */

  --shadow: none;             /* теней нет. Глубину дают фото и смена темы секции */
  --shadow-overlay: 0 24px 48px -24px rgb(0 0 0 / .35);  /* только выпадающее меню над фото */

  --z-base: 0; --z-sticky: 40; --z-menu: 45; --z-skip: 100;
}


/* --------------------------------------------------------------------------
   5. ДВИЖЕНИЕ
   Пружины по Apple (damping/response), переведённые в CSS linear().
   Длительность пружины = время, за которое она реально успокаивается.
   -------------------------------------------------------------------------- */
:root {
  --dur-instant: 100ms;   /* отклик на нажатие */
  --dur-fast:    180ms;   /* цвет, подчёркивание, иконка */
  --dur-base:    320ms;   /* шапка, меню, табы */
  --dur-slow:    560ms;   /* появление блока, смена кадра */
  --dur-photo:   900ms;   /* проявление фотографии после загрузки */

  --ease-out:      cubic-bezier(.16, 1, .3, 1);   /* появление: быстро стартует, мягко садится */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);     /* перемещение между двумя состояниями */
  --ease-in:       cubic-bezier(.4, 0, 1, 1);     /* уход со сцены */
  --ease-linear:   linear;                        /* только opacity у кадров и прогресс */

  /* damping 1.0, response 0.4 → ~600 ms. Основная пружина: без перелёта. */
  --spring:        linear(0, .061, .189, .334, .472, .59, .688, .766, .826, .872, .906, .932, .951, .965, .975, .982, .987, .991, .994, .995, .997, .998, .998, .999, 1);
  --spring-dur:    600ms;
  /* damping 1.0, response 0.3 → ~460 ms. Меню, раскрытие строки. */
  --spring-snappy: linear(0, .062, .192, .339, .477, .596, .693, .771, .83, .876, .909, .935, .953, .966, .976, .983, .988, .991, .994, .996, .997, .998, .999, .999, 1);
  --spring-snappy-dur: 460ms;
  /* damping 0.8, response 0.3 → ~420 ms, перелёт 1.5 %. Только после жеста с импульсом
     (свайп карусели, бросок шторки). На прокрутке и появлении не используется. */
  --spring-bounce: linear(0, .056, .184, .337, .49, .627, .741, .83, .897, .944, .976, .996, 1.008, 1.013, 1.015, 1.015, 1.013, 1.01, 1.008, 1.006, 1.004, 1.003, 1.002, 1.001, 1);
  --spring-bounce-dur: 420ms;

  --reveal-shift:   14px;   /* подъём текста при появлении; не больше 16 px */
  --reveal-stagger: 60ms;   /* шаг между строками; вся группа ≤ 400 ms */
  --press-scale:    .98;    /* кнопка под пальцем */
  --photo-scale-in: 1.04;   /* фото проявляется с лёгким «отъездом» 1.04 → 1 */
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-base: 160ms; --dur-slow: 200ms; --dur-photo: 200ms;
    --spring: var(--ease-standard); --spring-snappy: var(--ease-standard); --spring-bounce: var(--ease-standard);
    --spring-dur: 200ms; --spring-snappy-dur: 200ms; --spring-bounce-dur: 200ms;
    --reveal-shift: 0px; --reveal-stagger: 0ms; --press-scale: 1; --photo-scale-in: 1;
  }
}


/* --------------------------------------------------------------------------
   6. СЕМАНТИКА ЦВЕТА. Светлая тема — по умолчанию.
   Все пары текст/фон проверены на WCAG 2.2 AA (цифры — коэффициент контраста).
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg:          var(--p-white);
  --bg-sunken:   var(--p-paper-2);     /* карта, подложка документов */
  --bg-inverse:  var(--p-g-900);       /* футер */

  --fg:          var(--p-g-900);       /* 19.8 */
  --fg-2:        var(--p-g-600);       /*  7.1 — подписи, вторичный текст */
  --fg-3:        var(--p-g-500);       /*  5.0 — мета, даты, единицы измерения */
  --fg-on-accent:var(--p-white);       /*  7.3 */

  --accent:        var(--brand-text);  /* 5.6 — ссылки-действия, фокус */
  --accent-press:  var(--p-orange-700);
  --accent-plane:  var(--brand);       /* оранжевая плоскость (не больше одной на страницу; сейчас на главной их нет) */
  --signal:        var(--p-red-500);   /* 5.6 */

  --rule-strong: var(--p-g-300);       /* структурная линейка над таблицей: светлее и тоньше на вид, чем чёрная у Транзита */
  --rule:        var(--p-g-200);       /* разделитель строк в таблицах данных */
  --rule-link:   rgb(10 10 10 / .32);  /* покоящееся подчёркивание ссылки */

  --focus:       var(--brand-text);
  --selection-bg: var(--brand-text);
  --selection-fg: var(--p-white);
  --skeleton:    var(--p-g-100);

  /* Фото: светлая тема — строгий ч/б, как газетный снимок. */
  --w-figure: 400;   /* на белом 300 «рассыпается» */
  --photo-filter: grayscale(1) contrast(1.06);
  --photo-bg:     var(--p-g-100);
  --scrim-photo:  none;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg:          var(--p-ink-1);
  --bg-sunken:   var(--p-ink-2);
  --bg-inverse:  var(--p-ink-0);

  --fg:          var(--p-fog-1);       /* 16.3 */
  --fg-2:        var(--p-fog-2);       /*  7.9 */
  --fg-3:        var(--p-fog-3);       /*  5.6 */
  --fg-on-accent:var(--p-white);

  --accent:        var(--brand-on-dark); /* >= 4.5 на графите */
  --accent-press:  var(--p-fog-1);
  --accent-plane:  var(--brand);
  --signal:        var(--p-red-300);   /* 6.0 */

  --rule-strong: rgb(236 238 240 / .2);
  --rule:        rgb(236 238 240 / .10);
  --rule-link:   rgb(236 238 240 / .28);

  --focus:       var(--brand-on-dark);
  --selection-bg: var(--brand-text);
  --selection-fg: var(--p-white);
  --skeleton:    var(--p-ink-3);

  /* Фото: тёмная тема — приглушённый цвет, чтобы оставался холодный рассвет. */
  --w-figure: 300;   /* на тёмном светлое начертание выглядит как табло */
  --photo-filter: grayscale(.55) contrast(1.05) brightness(.9);
  --photo-bg:     var(--p-ink-3);
  /* Затемнение под белым текстом на фото. Нижняя граница текста должна
     попадать в зону ≥ .72 — тогда белый даёт ≥ 4.5:1 на любом участке кадра. */
  --scrim-photo:
    linear-gradient(180deg, rgb(15 17 19 / .86) 0%, rgb(15 17 19 / .5) 34%, rgb(15 17 19 / .08) 60%, rgb(15 17 19 / .9) 100%),
    linear-gradient(90deg,  rgb(15 17 19 / .8) 0%,  rgb(15 17 19 / .5) 34%, rgb(15 17 19 / 0) 60%);
}

@media (prefers-contrast: more) {
  :root, [data-theme] { --fg-3: var(--fg-2); --rule: var(--rule-strong); }
}


/* --------------------------------------------------------------------------
   7. БАЗА. Тонкий слой, который применяет токены. Компоненты — в макетах.
   -------------------------------------------------------------------------- */
[data-theme] { background-color: var(--bg); color: var(--fg); }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hdr-h) + var(--s-4));
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  font-feature-settings: var(--font-features);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* Типографические роли. Вес+размер+интерлиньяж+трекинг всегда меняются вместе. */
.t-display { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: var(--w-med); text-wrap: balance; max-width: var(--measure-title); }
.t-h1      { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); font-weight: var(--w-med); text-wrap: balance; }
.t-h2      { font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-weight: var(--w-med); text-wrap: balance; }
.t-h3      { font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: var(--w-med); }
.t-h4      { font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); font-weight: var(--w-med); }
.t-lead    { font-size: var(--t-lead); line-height: var(--lh-lead); letter-spacing: var(--tr-lead); max-width: var(--measure-lead); text-wrap: pretty; }
.t-body    { font-size: var(--t-body); line-height: var(--lh-body); max-width: var(--measure); text-wrap: pretty; }
.t-small   { font-size: var(--t-small); line-height: var(--lh-small); letter-spacing: var(--tr-small); }
.t-micro   { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--tr-micro); }
.t-figure  { font-size: var(--t-figure); line-height: var(--lh-figure); letter-spacing: var(--tr-figure); font-weight: var(--w-figure); font-variant-numeric: var(--font-num); }
.t-figure-s{ font-size: var(--t-figure-s); line-height: var(--lh-figure-s); letter-spacing: var(--tr-figure-s); font-weight: var(--w-figure); font-variant-numeric: var(--font-num); }
.t-num     { font-variant-numeric: var(--font-num); }
.fg-2 { color: var(--fg-2); }
.fg-3 { color: var(--fg-3); }

.wrap {
  width: 100%;
  max-width: calc(var(--grid-max) + 2 * var(--grid-margin));
  margin-inline: auto;
  padding-inline: var(--grid-margin);
  box-sizing: border-box;
}
.grid { display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); column-gap: var(--grid-gutter); }

/* Ссылки: подчёркивание есть всегда (это ссылка), при наведении меняет цвет. */
a { color: inherit; text-decoration-line: underline; text-decoration-thickness: var(--line-w); text-underline-offset: .24em; text-decoration-color: var(--rule-link);
    transition: text-decoration-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
a:hover { text-decoration-color: currentColor; }
a:active { color: var(--fg-2); }
.a-quiet { text-decoration-line: none; }          /* навигация, телефон в шапке */
.a-quiet:hover { text-decoration-line: underline; text-decoration-color: currentColor; }

/* Фокус: одинаковый у всего, видим только с клавиатуры. */
/* Кольцо повторяет скругление элемента; у элементов без своего радиуса (ссылки, текстовые команды) — --radius-s.
   :where() не перебивает собственный радиус кнопок и фото. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
:where(:focus-visible) { border-radius: var(--radius-s); }
:focus:not(:focus-visible) { outline: none; }

/* Кнопки: две, не больше. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-5);
  font: var(--w-med) var(--t-small)/1 var(--font-sans); letter-spacing: var(--tr-small);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: var(--line-w) solid currentColor; border-radius: var(--radius);
  background: transparent; color: var(--fg);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn:active { transform: scale(var(--press-scale)); }
.btn--solid { background: var(--brand-text); color: var(--p-white); border-color: var(--brand-text); min-height: 52px; padding: 0 var(--s-7); }
.btn--solid:hover { background: var(--btn-press); border-color: var(--btn-press); color: var(--p-white); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* Фотография: подложка + проявление после загрузки (см. §9 DESIGN-SYSTEM.md). */
.photo { background: var(--photo-bg); overflow: hidden; margin: 0; border-radius: var(--radius); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }
.js .photo img { opacity: 0; transform: scale(var(--photo-scale-in));
  transition: opacity var(--dur-photo) var(--ease-out), transform calc(var(--dur-photo) * 1.6) var(--ease-out); }
.js .photo.is-loaded img { opacity: 1; transform: none; }

/* Появление при прокрутке: один раз, только текстовые группы и фото. */
.js [data-reveal] { opacity: 0; transform: translateY(var(--reveal-shift));
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--spring-dur) var(--spring);
  transition-delay: calc(var(--i, 0) * var(--reveal-stagger)); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Скелет для данных из 1С (цены): ровно размер цифры, без мерцания-волны. */
.is-loading [data-price] { color: transparent; background: var(--skeleton); }
[data-price] { transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); }

a[href^="tel:"], a[href^="mailto:"] { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }