/* Авиграм — дизайн-код этапа 1 по мотивам The Verge (DESIGN.md из getdesign.md / VoltAgent awesome-design-md).
   Две темы: тёмная — родная (холст #131313, мятный и ультрафиолет как «сигнальная лента»), светлая — её позитив
   (холст белый, линии и текст #131313). Тема — атрибут data-theme (ставит theme.js на <html>); без атрибута и без
   скрипта — тема системы. Оформление — строгое (выбор владельца 15.10 из двух вариантов): акцент точечно, тихие
   линии, малые скругления. Тему можно задать и любому блоку (data-theme на нём). Все цвета — только через токены.
   Шрифты — замены фирменных с кириллицей (OFL, лежат рядом): Manuka → Oswald 700, PolySans → Onest,
   PolySans Mono → JetBrains Mono. Рубль (U+20BD) — из наборов latin-ext, грузятся только там, где он есть. */

@font-face { font-family: 'Onest'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/onest-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/onest-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; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/onest-latin-ext.woff2) format('woff2'); unicode-range: U+20BD; }

@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/oswald-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/oswald-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; }

@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url(fonts/jetbrains-mono-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url(fonts/jetbrains-mono-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; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url(fonts/jetbrains-mono-latin-ext.woff2) format('woff2'); unicode-range: U+20BD; }

/* Тёмная — по умолчанию (родная тема системы) */
:root, [data-theme="dark"] {
  color-scheme: dark;

  /* Поверхности */
  --canvas: #131313;        /* Canvas Black — холст */
  --surface: #2d2d2d;       /* Surface Slate — вторичная карточка, пузырь клиента, кнопка второго ряда */
  --frame: #313131;         /* Image Frame — тихая линия: рамка фото, разделитель */
  --line: #ffffff;          /* Hazard White — линия 1px карточки */
  --spot: #ffffff;          /* «прожектор»: плитка-исключение, выделенная заливкой */
  --on-spot: #131313;

  /* Текст */
  --ink: #ffffff;           /* основной */
  --ink-2: #e9e9e9;         /* Muted Text — на серых кнопках */
  --meta: #949494;          /* время, подписи, плейсхолдер */

  /* Сигнальные акценты — заливки и линии, не фон-подложка */
  --mint: #3cffd0;          /* Jelly Mint — главная кнопка, «новое», активное */
  --mint-line: #309875;     /* Console Mint Border — линия там, где мятный пересвечивает */
  --mint-mark: #3cffd0;     /* полоска непрочитанного; на белом — тёмный мятный */
  --uv: #5200ff;            /* Verge Ultraviolet — второй акцент, ошибка и предупреждение (красного в системе нет) */
  --on-accent: #000000;     /* текст на мятной и белой заливке */
  --on-uv: #ffffff;
  --accent-ink: #3cffd0;    /* акцентный ТЕКСТ (надзаголовки, ссылки) — мятный, только моно/жирным */
  --rail: #3d00bf;          /* Purple Rule — линия ленты чатов */
  --field-focus: #3cffd0;   /* рамка поля в фокусе */

  /* Состояния */
  --link-hover: #3860be;    /* Deep Link Blue — наведение на любую ссылку */
  --focus: #1eaedb;         /* Focus Cyan — только фокус с клавиатуры */
  --hover-ring: #c2c2c2;
  --pressed: #8c8c8c;       /* Dim Gray — нажатие */
}

/* Светлая — позитив: белый холст, линии и текст #131313. Мятный остаётся заливкой с чёрным текстом;
   акцентный текст и фокус поля — ультрафиолет (мятный текст на белом не читается). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --canvas: #ffffff;  --surface: #e9e9e9;  --frame: #c2c2c2;  --line: #131313;
    --spot: #131313;  --on-spot: #ffffff;
    --ink: #131313;  --ink-2: #2d2d2d;  --meta: #6e6e6e;
    --accent-ink: #5200ff;  --rail: #5200ff;  --field-focus: #5200ff;  --mint-mark: #309875;
    --hover-ring: #8c8c8c;
  }
}
[data-theme="light"] {
  color-scheme: light;
  --canvas: #ffffff;  --surface: #e9e9e9;  --frame: #c2c2c2;  --line: #131313;
  --spot: #131313;  --on-spot: #ffffff;
  --ink: #131313;  --ink-2: #2d2d2d;  --meta: #6e6e6e;
  --accent-ink: #5200ff;  --rail: #5200ff;  --field-focus: #5200ff;  --mint-mark: #309875;
  --hover-ring: #8c8c8c;
}

/* Шкалы — общие для тем и вариантов */
:root {
  /* Отступы: шаг 8, внутри кнопок и плашек — мелкая шкала */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-12: 48px;  --s-16: 64px;
  --r-field: 2px;  --r-img: 3px;  --r-nest: 4px;

  --f-display: 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --f-sans: 'Onest', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, 'Courier New', monospace;

  --t-fast: 150ms ease;
}

/* Роли компонентов (строгое оформление): главная кнопка — цветом текста (белая / чёрная), мятный — только «новое»
   и полоска непрочитанного; линии карточек тихие; скругления 2–8px; ошибка — линия и метка ультрафиолета без заливки
   блока; заголовок подключения — Onest. Объявлены на каждом элементе с темой — считаются от его цветов. */
:root, [data-theme] {
  --r-card: 6px;  --r-feature: 8px;  --r-btn: 4px;  --r-promo: 4px;  --r-outline: 4px;  --r-pill: 2px;
  --btn-bg: var(--ink);           --btn-fg: var(--canvas);
  --btn2-line: var(--frame);      --btn2-fg: var(--ink);
  --btn2-hover-bg: var(--surface); --btn2-hover-fg: var(--ink);
  --tile-line: var(--frame);      --tile-unread-line: var(--frame); --tile-unread-mark: inset 3px 0 0 0 var(--mint-mark);
  --eyebrow: var(--meta);         --tab-mark: var(--ink);           --stream-rail: var(--frame);
  --alert-bg: transparent;        --alert-fg: var(--ink);           --alert-line: var(--uv);  --alert-mark: inset 3px 0 0 0 var(--uv);
  --spot-bg: var(--surface);      --spot-fg: var(--ink);
  --hero: 700 30px/1.1 var(--f-sans);  --hero-case: none;  --hero-track: 0;
}