/* ============================================================================
   SerialCars — портал. Слой ТОКЕНОВ «тёмный премиум».
   Единственное место, где живут сырые значения. В примитивах и на страницах
   допускается только var(--sc-*, фолбэк) — у каждой переменной есть запасное
   значение, поэтому потеря одного файла не роняет вёрстку (пустая var() = Times).
   Префикс --sc- выбран, чтобы слой не пересекался с assets/tokens.css старого сайта.
   ========================================================================== */

:root{

  /* ── 1. Поверхности: от почти чёрного до приподнятого ───────────────────── */
  /* Ряд слегка тёплый по синему каналу: холодная тень + тёплый свет = «дорого». */
  --sc-surface-0:#08070A;        /* провал: подвал, шахта под медиа, фон модалки */
  --sc-surface-1:#0E0D11;        /* БАЗОВАЯ поверхность страницы */
  --sc-surface-2:#141317;        /* секция-подложка, шапка на прокрутке */
  --sc-surface-3:#1A181D;        /* карточка, панель фильтров */
  --sc-surface-4:#221F26;        /* вложенный блок, ховер карточки, поле ввода */
  --sc-surface-5:#2B2831;        /* приподнятое: меню, подсказка, модальное окно */
  --sc-surface-inset:#0B0A0E;    /* «вдавленное»: трек слайдера, ячейка кода */
  --sc-surface-veil:rgba(20,19,23,.72);   /* стекло поверх фото/видео */
  --sc-surface-veil-strong:rgba(8,7,10,.88);
  --sc-scrim:rgba(6,5,8,.78);              /* затемнение под модалкой */
  --sc-scrim-media:linear-gradient(180deg,rgba(8,7,10,.10) 0%,rgba(8,7,10,.72) 62%,rgba(8,7,10,.96) 100%);

  /* ── 2. Текст: тёплый нейтральный ряд ───────────────────────────────────── */
  --sc-text:#F6F3F1;             /* основной          17.53:1 на surface-1 */
  --sc-text-muted:#BDB5B0;       /* приглушённый       9.59:1 на surface-1 */
  --sc-text-faint:#998F87;       /* слабый             6.12:1 на surface-1 */
  --sc-text-on-accent:#FFFFFF;   /* на заливке акцентом 4.60:1 */
  --sc-text-on-bright:#0B0A0E;   /* на «электрике», успехе, предупреждении */
  --sc-text-disabled:#6B6560;

  /* ── 3. Фирменный акцент SerialCars ──────────────────────────────────────── */
  --sc-accent:#E02D1F;           /* заливка: кнопка, плашка, номерной знак — белым 4,60:1 */
  --sc-accent-hover:#CF281B;     /* ховер уходит В ГЛУБИНУ, а не в яркость: белым 5,29:1.
                                    Светлее #E02D1F белый текст уже не проходит норму 4,5:1. */
  --sc-accent-press:#B21F15;     /* нажатие — белым 6,77:1 */
  --sc-accent-text:#FF5240;      /* акцент КАК ТЕКСТ на тёмном  6.02:1 на surface-1 */
  --sc-accent-soft:rgba(224,45,31,.16);   /* подложка чипа, тихая плашка */
  --sc-accent-line:rgba(224,45,31,.42);   /* граница по акценту */
  --sc-accent-glow:rgba(224,45,31,.34);   /* свечение под кнопкой */

  /* ── 4. «Электрический» дополнительный: подсветка, графики, данные ───────── */
  /* Холодный циан — единственный цвет, который не спорит с красным и читается
     на всех шести поверхностях (12.27:1 на surface-1, 9.17:1 на surface-5). */
  --sc-electric:#3DE0FF;
  --sc-electric-text:#3DE0FF;
  --sc-electric-deep:#0FA7C9;    /* заливка, если нужен тёмный вариант */
  --sc-electric-soft:rgba(61,224,255,.14);
  --sc-electric-line:rgba(61,224,255,.38);
  --sc-electric-glow:rgba(61,224,255,.28);

  /* ── 5. Состояния ───────────────────────────────────────────────────────── */
  --sc-success:#3DDC84;   --sc-success-soft:rgba(61,220,132,.14); --sc-success-line:rgba(61,220,132,.38);
  --sc-warning:#FFB020;   --sc-warning-soft:rgba(255,176,32,.14); --sc-warning-line:rgba(255,176,32,.38);
  --sc-danger:#FF6B5C;    --sc-danger-soft:rgba(255,107,92,.15);  --sc-danger-line:rgba(255,107,92,.40);
  --sc-info:#8FA2FF;      --sc-info-soft:rgba(143,162,255,.14);   --sc-info-line:rgba(143,162,255,.38);

  /* ── 6. Границы и фокус ─────────────────────────────────────────────────── */
  --sc-border:rgba(255,255,255,.08);          /* обычная грань карточки */
  --sc-border-strong:rgba(255,255,255,.16);   /* ховер, активное поле */
  --sc-border-faint:rgba(255,255,255,.05);    /* разделитель внутри карточки */
  --sc-border-bright:rgba(255,255,255,.28);   /* обводка на фото */
  --sc-focus:#3DE0FF;                          /* кольцо фокуса — всегда «электрика» */
  --sc-focus-ring:0 0 0 2px var(--sc-surface-1,#0E0D11),0 0 0 4px var(--sc-focus,#3DE0FF);
  --sc-focus-ring-flat:0 0 0 2px var(--sc-focus,#3DE0FF);

  /* ── 7. Тени. Свет ВСЕГДА сверху: смещение по Y положительное,
         а по верхней грани — тонкая внутренняя подсветка. ─────────────────── */
  --sc-shadow-1:0 1px 2px rgba(0,0,0,.40),0 2px 6px rgba(0,0,0,.26);
  --sc-shadow-2:0 2px 4px rgba(0,0,0,.38),0 8px 20px rgba(0,0,0,.34);
  --sc-shadow-3:0 4px 8px rgba(0,0,0,.36),0 18px 44px rgba(0,0,0,.44);
  --sc-shadow-4:0 8px 16px rgba(0,0,0,.34),0 40px 88px rgba(0,0,0,.56);
  --sc-shadow-accent:0 10px 30px var(--sc-accent-glow,rgba(224,45,31,.34));
  --sc-shadow-electric:0 10px 30px var(--sc-electric-glow,rgba(61,224,255,.28));
  --sc-edge-top:inset 0 1px 0 rgba(255,255,255,.07);    /* блик по верхней грани */
  --sc-edge-top-strong:inset 0 1px 0 rgba(255,255,255,.14);

  /* ── 8. Радиусы: ровно четыре ступени ───────────────────────────────────── */
  --sc-r-sm:8px;  --sc-r-md:16px;  --sc-r-lg:24px;  --sc-r-full:999px;

  /* ── 9. Отступы: шкала 4…96 ─────────────────────────────────────────────── */
  --sc-sp-1:4px;   --sc-sp-2:8px;   --sc-sp-3:12px;  --sc-sp-4:16px;
  --sc-sp-5:20px;  --sc-sp-6:24px;  --sc-sp-7:32px;  --sc-sp-8:40px;
  --sc-sp-9:48px;  --sc-sp-10:56px; --sc-sp-11:64px; --sc-sp-12:80px;
  --sc-sp-13:96px;

  /* ── 10. Шрифты. У каждого стека есть системный запас: пустая var() = Times. */
  --sc-font-text:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sc-font-display:"Unbounded",var(--sc-font-text,system-ui),sans-serif;
  --sc-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;

  /* ── 11. Кегли 12…84 и межстрочные.
         Прописная кириллица разваливается при lh < 1.25 — для капса
         отдельный токен --sc-lh-caps (1.35). ──────────────────────────────── */
  --sc-fs-12:12px;  --sc-lh-12:18px;
  --sc-fs-13:13px;  --sc-lh-13:20px;
  --sc-fs-14:14px;  --sc-lh-14:21px;
  --sc-fs-16:16px;  --sc-lh-16:25px;
  --sc-fs-18:18px;  --sc-lh-18:28px;
  --sc-fs-20:20px;  --sc-lh-20:28px;
  --sc-fs-24:24px;  --sc-lh-24:32px;
  --sc-fs-30:30px;  --sc-lh-30:36px;
  --sc-fs-36:36px;  --sc-lh-36:42px;
  --sc-fs-44:44px;  --sc-lh-44:50px;
  --sc-fs-56:56px;  --sc-lh-56:62px;
  --sc-fs-68:68px;  --sc-lh-68:74px;
  --sc-fs-84:84px;  --sc-lh-84:90px;
  --sc-lh-caps:1.35;        /* любой текст в ПРОПИСНЫХ */
  --sc-lh-tight:1.08;       /* витринные заголовки */
  --sc-lh-body:1.55;        /* абзац */
  /* две витринные величины вне шкалы — только для первого экрана и секций */
  --sc-fs-display:clamp(40px,6.4vw,84px);
  --sc-fs-section:clamp(28px,3.6vw,56px);
  /* начертания и трекинг */
  --sc-fw-regular:400; --sc-fw-medium:500; --sc-fw-semibold:600; --sc-fw-bold:700; --sc-fw-black:800;
  --sc-track-display:-.03em;  /* Unbounded крупно — сжимаем */
  --sc-track-tight:-.015em;
  --sc-track-normal:0;
  --sc-track-caps:.10em;      /* мелкий капс моноширинным */

  /* ── 12. Движение: 120…260 мс, только opacity/transform ─────────────────── */
  --sc-dur-1:120ms;   /* мгновенный отклик: цвет кнопки, чип */
  --sc-dur-2:160ms;   /* обычный: ховер карточки, фокус */
  --sc-dur-3:200ms;   /* появление: подсказка, выпадающий список */
  --sc-dur-4:260ms;   /* крупное: модальное окно, подиум */
  --sc-ease:cubic-bezier(.22,.8,.28,1);             /* основной выход */
  --sc-ease-in-out:cubic-bezier(.65,0,.35,1);
  --sc-ease-exit:cubic-bezier(.4,0,1,1);
  --sc-ease-spring:cubic-bezier(.34,1.32,.5,1);      /* лёгкий перелёт */
  --sc-tr-control:color var(--sc-dur-1,120ms) var(--sc-ease,ease),background-color var(--sc-dur-1,120ms) var(--sc-ease,ease),border-color var(--sc-dur-1,120ms) var(--sc-ease,ease),box-shadow var(--sc-dur-2,160ms) var(--sc-ease,ease),transform var(--sc-dur-2,160ms) var(--sc-ease,ease),opacity var(--sc-dur-2,160ms) var(--sc-ease,ease);
  --sc-tr-surface:border-color var(--sc-dur-2,160ms) var(--sc-ease,ease),box-shadow var(--sc-dur-3,200ms) var(--sc-ease,ease),transform var(--sc-dur-3,200ms) var(--sc-ease,ease),opacity var(--sc-dur-3,200ms) var(--sc-ease,ease);

  /* ── 13. Слои ───────────────────────────────────────────────────────────── */
  --sc-z-below:-1;   --sc-z-base:0;     --sc-z-raised:10;  --sc-z-sticky:100;
  --sc-z-header:200; --sc-z-dropdown:300; --sc-z-scrim:400; --sc-z-modal:500;
  --sc-z-toast:600;  --sc-z-tooltip:700;

  /* ── 14. Размеры каркаса ────────────────────────────────────────────────── */
  --sc-page:1320px;      /* предельная ширина контента */
  --sc-page-narrow:960px;
  --sc-gutter:16px;      /* боковое поле на телефоне */
  --sc-header-h:72px;
  --sc-control-sm:36px; --sc-control-md:44px; --sc-control-lg:56px;   /* высоты кнопок и полей */
}

@media (min-width:768px){ :root{ --sc-gutter:24px; } }
@media (min-width:1200px){ :root{ --sc-gutter:40px; } }

/* Ничего не двигаем, если человек просил покой. Длительности обнуляем в
   токенах — это выключает движение во всех примитивах разом. */
@media (prefers-reduced-motion:reduce){
  :root{ --sc-dur-1:1ms; --sc-dur-2:1ms; --sc-dur-3:1ms; --sc-dur-4:1ms; }
}