/*
 * Дизайн-токены loliland-farm — единственное место, где задаётся стиль.
 * Сняты с референса docs/ui-reference.png (светлая тема мессенджера: серый фон, белые поверхности,
 * чёрные акценты, синее подчёркивание вкладок, красные опасные действия). Логотипы и ассеты
 * оригинала не используются. Тёмной темы в референсе нет; чтобы добавить её, достаточно
 * переопределить цветовые переменные ниже в блоке [data-theme="dark"].
 *
 * Контраст текста — не ниже WCAG AA (4,5:1) на каждом фоне, где цвет используется; цвета текста
 * затемнены относительно референса. Проверку делает tests/web/test_contrast.py: меняете цвет — обновите
 * список пар там.
 */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-cyrillic-wght.de93fdc85e3d.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-wght.260c81a4759b.woff2") format("woff2-variations");
  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 {
  color-scheme: light;

  /* --- поверхности (референс: фон панели «Инфо», белые список и карточки) --- */
  --bg: #eceef2;
  --surface: #ffffff;
  --surface-2: #f6f7f9;          /* навигационная колонка, подложки внутри карточек */
  --field: #e8e8ea;              /* поле «Поиск» */
  --field-focus: #ffffff;
  --hover: #f3f4f6;              /* пункт меню под курсором */
  --pressed: #e9eaee;
  --selected: #eef5ff;           /* выбранная строка списка */

  /* --- текст --- */
  --ink: #101214;                /* заголовки, чёрная кнопка «+» */
  --ink-hover: #2a2d31;
  --text: #1c1e21;
  --text-2: #5f6166;             /* вторая строка элемента списка, описания, плейсхолдеры */
  --text-3: #6c7076;             /* время, неактивные вкладки и подписи навигации (только на белом и hover) */
  --on-ink: #ffffff;

  /* --- линии --- */
  --line: #efefef;
  --line-strong: #dedede;
  --menu-border: #e3e3e8;

  /* --- акценты --- */
  --accent: #185ddc;             /* подчёркивание активной вкладки, ссылки */
  --accent-hover: #124fc0;
  --accent-soft: rgb(45 111 232 / 0.1);
  --focus-ring: rgb(45 111 232 / 0.35);
  --danger: #bf2b26;             /* «Навсегда» в меню */
  --danger-hover: #a3241f;
  --danger-soft: rgb(217 68 63 / 0.1);

  /* --- статусы (в референсе нет — выведены из палитры: мягкая подложка + насыщенный текст) --- */
  --ok: #17743f;
  --ok-soft: rgb(31 157 85 / 0.11);
  --warn: #975a00;
  --warn-soft: rgb(230 145 0 / 0.14);
  --bad: var(--danger);
  --bad-soft: var(--danger-soft);
  --info: var(--accent);
  --info-soft: var(--accent-soft);
  --muted: #65676c;
  --muted-soft: rgb(16 18 20 / 0.06);

  /* --- аватары: мягкие тона по хешу id --- */
  --avatar-1: #dbe7ff;  --avatar-1-ink: #2457c5;
  --avatar-2: #e3f4e8;  --avatar-2-ink: #1d7a45;
  --avatar-3: #fdebd8;  --avatar-3-ink: #a05a0b;
  --avatar-4: #efe3fb;  --avatar-4-ink: #6b3fb5;
  --avatar-5: #fde3e6;  --avatar-5-ink: #b0303f;
  --avatar-6: #dff3f6;  --avatar-6-ink: #13707f;

  /* --- радиусы (референс: кнопка «+» 10, поиск и меню 12, плитки действий 16, карточка 20) --- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-btn: 10px;
  --r-field: 12px;
  --r-menu: 12px;
  --r-tile: 16px;
  --r-card: 20px;
  --r-pill: 999px;

  /* --- тени: в референсе почти плоско, белое на сером; меню заметно приподнято --- */
  --shadow-flat: 0 1px 2px rgb(16 18 20 / 0.04);
  --shadow-hover: 0 4px 14px rgb(16 18 20 / 0.08);
  --shadow-menu: 0 8px 24px rgb(16 18 20 / 0.12);
  --shadow-dialog: 0 24px 64px rgb(16 18 20 / 0.22);
  --backdrop: rgb(16 18 20 / 0.32);

  /* --- типографика: шкала 12 / 13 / 15 / 16 / 22 / 28 / 34 / 40, веса 400 / 500 / 600 / 700;
         других размеров и весов в компонентах нет --- */
  --font: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --fs-display: 40px;   /* сумма монет */
  --fs-display-sm: 34px; /* сумма монет на узком экране */
  --fs-avatar: 28px;    /* инициалы в большом аватаре */
  --fs-title: 22px;     /* «Чаты» */
  --fs-head: 16px;      /* «Инфо», строка списка */
  --fs-body: 15px;
  --fs-small: 13px;     /* подписи, время, плитки */
  --fs-micro: 12px;     /* подписи навигации */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh: 1.5;            /* основной текст */
  --lh-tight: 1.25;     /* заголовки */
  --measure: 65ch;      /* ширина абзаца */

  /* --- сетка и плотность (шаг 8px, строка списка ≈76px, аватар 54px) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --rail-w: 76px;
  --list-w: 352px;
  --row-h: 72px;
  --avatar: 48px;
  --avatar-lg: 88px;
  --field-h: 40px;
  --tile-h: 68px;
  --content-max: 1240px;

  /* --- движение: одна кривая, 150–250 мс, анимируются только transform, opacity и цвета --- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 250ms;
  --lift: -1px;          /* подъём при наведении */
  --press: 0.97;         /* «нажатие» */
  --enter-shift: 6px;    /* сдвиг появления: блоки страниц, контент вкладки, меню, пресеты slide-* */
  --toast-shift: 24px;   /* тост выезжает из угла на это расстояние */
  --anim-pop: 0.96;      /* начальный масштаб пресета pop (диалог, скриншоты) */
  --anim-stagger: 30ms;  /* шаг очереди появления (stagger), не больше 8 шагов */
}

/* prefers-reduced-motion или переключатель «Меньше анимации» в настройках: всё мгновенно и без сдвигов */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
    --lift: 0px;
    --press: 1;
    --enter-shift: 0px;
    --toast-shift: 0px;
    --anim-pop: 1;
    --anim-stagger: 0ms;
  }
}

:root[data-motion="reduce"] {
  --dur-fast: 0ms;
  --dur: 0ms;
  --dur-slow: 0ms;
  --lift: 0px;
  --press: 1;
  --enter-shift: 0px;
  --toast-shift: 0px;
  --anim-pop: 1;
  --anim-stagger: 0ms;
}