/* ============================================================
   ТОКЕНЫ ДИЗАЙНА
   Все цвета/отступы/тени задаются здесь. Менять оформление
   сайта нужно в первую очередь тут, а не в компонентах.
   ============================================================ */

/* Штатный шрифт МЧС. Файлы положить в assets/fonts/ и раскомментировать.
@font-face{
  font-family:'GOST UI 2';
  src:url('../fonts/GOSTUI2-Regular.woff2') format('woff2'),
      url('../fonts/GOSTUI2-Regular.woff') format('woff');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'GOST UI 2';
  src:url('../fonts/GOSTUI2-Medium.woff2') format('woff2');
  font-weight:500; font-display:swap;
}
@font-face{
  font-family:'GOST UI 2';
  src:url('../fonts/GOSTUI2-Bold.woff2') format('woff2');
  font-weight:700; font-display:swap;
}
*/

:root{
  /* Фирменные цвета (взяты из текущего сайта) */
  --blue:#2058a4;
  --blue-dark:#1a4a8c;
  --blue-deep:#12365f;
  --blue-soft:#e9f0fa;
  --orange:#ff8600;
  --orange-dark:#e07500;
  --line-blue:#007cff;

  /* Нейтральные */
  --bg:#eef1f5;
  --surface:#ffffff;
  --surface-2:#f6f8fb;
  --border:#e2e8f0;
  --text:#25313f;
  --text-muted:#6b7a8c;
  --title:#1e3a5f;

  /* Геометрия */
  --radius:14px;
  --radius-sm:9px;
  --radius-pill:999px;
  /* Ширина содержимого и боковые отступы.
     Полоса до края экрана читается плохо: на широких мониторах
     строка получается слишком длинной, а взгляд теряет начало
     следующей. Ограничиваем ширину и оставляем заметные поля. */
  --container:1600px;
  --gutter-min:20px;
  --gutter-max:80px;
  --content-max:1500px;
  --gap:clamp(16px,1.6vw,32px);

  /* Тени */
  --shadow-1:0 4px 16px rgba(16,42,77,.08);
  --shadow-2:0 14px 32px rgba(16,42,77,.16);
  --shadow-header:0 6px 22px rgba(9,32,64,.28);

  /* Типографика */
  --font:'GOST UI 2','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --fs-body:16px;
  --lh-body:1.55;

  /* Служебное */
  /* Высота разделительной линии под шапкой: делится на три
     равные полосы, поэтому кратна трём */
  --header-line-h:24px;
  --nav-h:54px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  overflow-x:hidden;
}

body.is-locked{overflow:hidden}

img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--orange)}
h1,h2,h3,h4{margin:0 0 .6em;line-height:1.25;color:var(--title);font-weight:700}
h1{font-size:clamp(24px,2.4vw,34px)}
h2{font-size:clamp(20px,1.9vw,27px)}
h3{font-size:clamp(17px,1.4vw,21px)}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.3em}
button{font-family:inherit}

/* Доступность: видимый фокус с клавиатуры */
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:4px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:10000;
  background:var(--orange);color:#fff;padding:12px 20px;font-weight:700;
}
.skip-link:focus{left:0}

.app{display:flex;flex-direction:column;min-height:100vh}
.site-main{flex:1 0 auto;outline:none}

.container{
  width:100%;max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(var(--gutter-min), 5vw, var(--gutter-max));
}

/* Полоса прогресса перехода между разделами */
.route-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:9998;
  background:linear-gradient(90deg,var(--orange),#ffb75a);
  opacity:0;transition:width .25s var(--ease),opacity .3s var(--ease);
  box-shadow:0 0 10px rgba(255,134,0,.7);
}
.route-progress.is-active{opacity:1}

/* Уважение к системной настройке «меньше движения» */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}