/* АртБаза — токены дизайн-системы (27.10). Единственное место, где заданы шрифт, цвета, размеры текста, веса,
   скругления, тени и движение; стиль.css и шаблоны берут их только через var(--…), литералов цвета в правилах нет.
   Витрина на сайте ArtKelo переодевается своим файлом темы поверх этого (статика/тема-витрина.css, смотреть — /design?theme=витрина).
   Справочник: что за чем, где какой компонент, правила — приложение/дизайн-система.md, живой образец — /design.
   Тема одна — светлая тёплая (Тимур 23.10: бежевый фон, коричневый «дерево», зелёный «построен»). */

@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("шрифты/onest-cyrillic-wght-normal.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: 100 900; font-display: swap;
  src: url("шрифты/onest-latin-wght-normal.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 {
  /* ---------- поверхности ---------- */
  --фон: #f7f3ed;                 /* бумага: лента, страницы */
  --фон-стекло: color-mix(in srgb, var(--фон) 97%, transparent);   /* липкие полосы поверх ленты */
  --поверх: #ffffff;              /* лист: окно кадра, карточки, меню, поля */
  --серый: #efe8de;               /* заливка: кнопка, выбранная вкладка, заглушка фото */
  --серый-2: #e5dccf;             /* заливка при наведении, пустая часть полосок */
  --линия: #e9e1d5;               /* рамки и разделители */

  /* ---------- текст ---------- */
  --текст: #211e1a;
  --тише: #6f675d;                /* вторичный: подписи, пояснения */
  --бледно: #a69d91;              /* третичный: счётчики, подсказки, подвал */
  --на-тёмном: #ffffff;           /* текст на тёмном и на фото */

  /* ---------- тёмный: главное действие и выбранное ---------- */
  --тёмный: #211e1a;              /* главная кнопка, выбранная фишка, вопрос в диалоге, тост */
  --тёмный-наведён: #3a352f;

  /* ---------- дерево: акцент бренда ---------- */
  --дерево: #9a6b3f;              /* «БАЗА» в марке, аватар, столбик текущей недели, рамка в фокусе */
  --дерево-тёмное: #7a5230;       /* текст на светлом дереве, ссылки «дальше» */
  --дерево-светлое: #f3e9dc;      /* фон «как понял», таймкоды, сохранённое */
  --дерево-приглушённое: #d9c4a8; /* прошлые недели на столбиках */
  --дерево-след: color-mix(in srgb, var(--дерево) 18%, transparent);   /* пустая часть кольца наполнения */

  /* ---------- смысл: статусы и изменения ---------- */
  --зелёный: #0b8f45;             /* построен, рост, план выполнен, «годится клиенту» */
  --зелёный-светлый: #e2f4e9;
  --проект: #958c80;              /* статус «проект» (не построен) — тёплый серый */
  --красный: #b3261e;             /* спад, «Выйти», «Убрать насовсем» при наведении */
  --красный-светлый: #fbe9e4;     /* фон ошибки */
  --красный-тёмный: #9b2c16;      /* текст ошибки */
  --линия-связи: rgb(110 90 70 / .45);   /* линии «похожие» на шаре и в легенде */
  /* ---------- ряды графиков: выбранные ролики на «Медиа → Канал», по порядку выбора (28.10). Проверено валидатором
     скилла dataviz на --фон: соседние пары различимы и при дальтонизме; 2–5 светлее 3:1 к фону — поэтому номер у линии,
     легенда и таблица по дням. Зелёный и красный в ряды не берём: это смысл (рост, спад) ---------- */
  --ряд-1: #2a78d6;               /* синий */
  --ряд-2: #eb6834;               /* оранжевый */
  --ряд-3: #1baf7a;               /* бирюзовый */
  --ряд-4: #eda100;               /* жёлтый */
  --ряд-5: #e87ba4;               /* розовый */
  --ряд-6: #4a3aa7;               /* фиолетовый */

  /* ---------- поверх фото и затемнения ---------- */
  --затемнение: rgb(33 30 26 / .74);         /* фон под окном кадра, метка «всё», длительность ролика */
  --затемнение-лёгкое: rgb(33 30 26 / .4);   /* фон под шторкой */
  --плашка: rgb(255 255 255 / .94);          /* светлая метка и круглые кнопки на фото */
  --плашка-тёмная: rgb(33 30 26 / .55);      /* счётчик кадров на фото */
  --тень-фото: rgb(20 16 12 / .64);          /* низ фото под белой подписью (градиент) */
  --наведение-фото: rgb(0 0 0 / .1);         /* фото чуть темнеет под мышью */

  /* ---------- шрифт и размеры текста ---------- */
  --шрифт: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --т-микро: 11px;        /* нижняя панель телефона, оси графиков, счётчики на вариантах */
  --т-подпись: 12.5px;    /* под плиткой, small, метки на фото, подвал */
  --т-заметка: 13.5px;    /* заметки, вторичные строки, фишки, источники фактов */
  --т-кнопка: 14.5px;     /* кнопки, меню, подписи плиток, таблицы */
  --т-текст: 15px;        /* основной текст */
  --т-чтение: 16px;       /* переписка, вывод словами, поля ввода (меньше 16 — iPhone увеличивает страницу) */
  --т-раздел: 17px;       /* заголовок раздела h2, марка, вывод «узнал» */
  --т-блок: 20px;         /* заголовок блока внутри страницы */
  --т-шторка: 22px;       /* заголовок шторки, «Все проекты», h1 окна на телефоне */
  --т-карточка: 26px;     /* h1 окна кадра и карточки, цифра в плитке */
  --т-страница: 30px;     /* h1 страницы: вход, память, привет в диалоге */
  --т-цифра: 34px;        /* главная цифра недели */
  --т-крупно: 42px;       /* сводка карты: «717 проектов» */
  --т-кабинет: clamp(28px, 3.2vw, 42px);     /* h1 кабинетов */
  --т-герой: clamp(30px, 3.4vw, 46px);       /* h1 страницы проекта */
  --вес-обычный: 400;
  --вес-средний: 500;     /* вкладки, метки, тост */
  --вес-кнопка: 550;      /* кнопки, подписи плиток, факты */
  --вес-заголовок: 600;   /* заголовки, бейджи */
  --вес-цифра: 650;       /* цифры, статусы, «кто вошёл» */
  --вес-марка: 700;       /* «АРТБАЗА», аватар */

  /* ---------- скругления ---------- */
  --радиус-мини: 8px;     /* мелочь внутри: картинка в фишке, длительность ролика, таймкод */
  --радиус-малый: 12px;   /* поля входа, пункты меню, плашки-предупреждения, подсказка графика */
  --радиус: 16px;         /* фото и плитки, карточки-цифры, строки памяти */
  --радиус-крупный: 20px; /* большое фото, меню, примеры и вопрос в диалоге, блок «узнал» */
  --радиус-лист: 24px;    /* листы: окно кадра, панель карты, вход, шторки, поле диалога */
  --радиус-пилюля: 999px; /* кнопки, фишки, вкладки, поиск, метки */

  /* ---------- тени: только у того, что лежит поверх ---------- */
  --тень-мелкая: 0 2px 10px rgb(0 0 0 / .18);          /* кнопка на плитке */
  --тень-кнопки: 0 4px 16px rgb(0 0 0 / .18);          /* круглые кнопки поверх фото, подсказка графика */
  --тень-меню: 0 12px 40px rgb(33 30 26 / .18);        /* выпадающие меню */
  --тень-поля: 0 10px 32px -16px rgb(70 45 20 / .35);  /* поле поиска в фокусе, поле диалога */
  --тень-листа: 0 1px 24px rgb(0 0 0 / .08);           /* лист окна на отдельной странице */
  --тень-шторки: 0 -20px 60px -30px rgb(33 30 26 / .45);       /* шторка снизу */
  --тень-шторки-сбоку: -20px 0 60px -30px rgb(33 30 26 / .45); /* шторка справа */

  /* ---------- раскладка ---------- */
  --поле: 24px;           /* боковое поле страницы */
  --зазор: 16px;          /* между колонками плитки */
  --шапка: 68px;          /* высота шапки */

  /* ---------- движение: быстрый старт, мягкий конец; исчезновение быстрее появления ---------- */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-in: cubic-bezier(.05, .7, .1, 1);
  --ease-out: cubic-bezier(.3, 0, .8, .15);
  --пружина: linear(0, .242 8%, .620 17%, .887 25%, 1.013 33%, 1.046 42%, 1.037 50%, 1.020 58%, 1.006 67%, .998 79%, 1);
}
@media (max-width: 760px) {
  :root { --поле: 14px; --зазор: 10px; --шапка: 60px; }
}