/* Семейство ROG на rogssh.net: общая гамма (графит + янтарный акцент), шрифт Manrope и полосы «Приложения ROG».
   Подключается последним в index.html сайта, кабинета и админки — переопределяет токены src/shared/tokens.css.
   Исходник общих стилей семейства: rogsites/src/family.css (mail/voice/music/connect.rogapp.org). */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-ui: 'Manrope', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

/* светлая тема: тот же янтарь, но темнее — чтобы ссылки читались на белом (контраст ≥ 4.5:1) */
:root,
[data-theme='light'] {
  --accent: #8f6100;
  --accent-2: #7a5300;
  --accent-soft: rgb(196 138 0 / 0.12);
  --accent-fg: #ffffff;
}

/* тёмная тема — как у всех приложений ROG */
[data-theme='dark'] {
  --bg: #141417;
  --surface: #1f1f23;
  --surface-2: #27272c;
  --surface-3: #303036;
  --hover: rgb(255 255 255 / 0.05);
  --line: #2e2e35;
  --line-strong: #3b3b44;
  --text: #f1efe9;
  --text-2: #cfccc4;
  --text-3: #a9a69e;
  --accent: #f5c84b;
  --accent-2: #ffd977;
  --accent-soft: rgb(245 200 75 / 0.14);
  --accent-fg: #17150f;
}

/* ---------- «Приложения ROG» вверху и внизу страницы (одинаково на всех сайтах семейства) ---------- */
.rog-family {
  background: #0d0d0f;
  border-bottom: 1px solid #2e2e35;
  font: 600 13px/1.4 var(--font-ui);
  position: relative;
  z-index: 41;
}

.rog-family--bottom {
  border-bottom: 0;
  border-top: 1px solid #2e2e35;
}

.rog-family__in {
  max-width: var(--content, 1120px);
  margin: 0 auto;
  padding: 0 var(--gutter, 24px);
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  overflow-x: auto;
  scrollbar-width: none;
}

.rog-family__in::-webkit-scrollbar {
  display: none;
}

.rog-family__label {
  color: #8d8a83;
  margin-right: 10px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.rog-family a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 8px;
  color: #aaa79f;
  text-decoration: none;
  white-space: nowrap;
}

.rog-family a:hover {
  color: #f1efe9;
  background: #1f1f23;
}

.rog-family a[aria-current='page'] {
  color: #f5c84b;
  background: rgb(245 200 75 / 0.12);
}

.rog-family a:focus-visible {
  outline: 2px solid #f5c84b;
  outline-offset: 2px;
}

.rog-family svg {
  flex: none;
}

@media (max-width: 600px) {
  .rog-family__label {
    display: none;
  }
}