:root {
  --navy: #0f2a43;
  --sky: #aee0ee;
  --sky-d: #1f7691;
  --sand: #f0dfbd;
  --bg: #fff;
  --soft: #f4f8fa;
  --ink: #1a2630;
  --mute: #566673;
  --line: #dce5ea;
  --card: #fff;
  --btn: var(--navy);
  --btn-hover: #1f7691;
  --r: 14px;
  /* шрифты и размер текста — меняются в админке: Оформление */
  --font-body: Inter, system-ui, sans-serif;
  --font-head: Montserrat, Inter, sans-serif;
  --font-size: 17px;
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-family: var(--font-body);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #0b1722;
    --soft: #102231;
    --ink: #e6edf2;
    --mute: #9db0bf;
    --line: #223a4d;
    --card: #112636;
    --sky-d: #7cc6dd;
    --btn: #1f7691;
    --btn-hover: #2a8db0;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --btn: #1f7691;
  --btn-hover: #2a8db0;
  --bg: #0b1722;
  --soft: #102231;
  --ink: #e6edf2;
  --mute: #9db0bf;
  --line: #223a4d;
  --card: #112636;
  --sky-d: #7cc6dd;
}

html {
  scroll-padding-top: env(safe-area-inset-top, 0px);
}

* {
  box-sizing: border-box;
}

/* атрибут hidden скрывает всегда — даже если у элемента в стилях display: flex/grid/inline-block */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  font-size: var(--font-size);
}

h1,
h2,
h3,
.bn {
  font-family: var(--font-head);
  line-height: 1.2;
  margin: 0;
}

a {
  color: var(--sky-d);
}

:focus-visible {
  outline: 3px solid var(--sky-d);
  outline-offset: 2px;
}

.w {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.skip {
  position: absolute;
  left: -999px;
}

.skip:focus {
  left: 8px;
  top: 8px;
  background: #fff;
  color: #000;
  padding: 8px;
  z-index: 99;
}