/* =========================================================================
   Уклад — дизайн-токены (v1, 30.10.2026)
   Единственный источник цветов, шрифтов, отступов, радиусов, теней и движения.
   Компоненты используют только эти переменные. Новых hex-значений в экранах нет.
   Тема: <html data-u-theme="light|dark">. По умолчанию — светлая.
   ========================================================================= */

/* Шрифт Onest (OFL). Для продакшна положить woff2 в /app/fonts/ — без внешней загрузки.
@font-face{font-family:"Onest";font-weight:400 700;font-display:swap;src:url("fonts/Onest-Variable.woff2") format("woff2")}
*/

:root{
  /* ---- шрифт ---- */
  --u-font:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* ---- шкала текста (rem при базовых 16px) ---- */
  --u-text-xs:.75rem;      /* 12 — служебные подписи */
  --u-text-sm:.8125rem;    /* 13 — пояснения, мета */
  --u-text-md:.9375rem;    /* 15 — основной текст интерфейса */
  --u-text-lg:1.0625rem;   /* 17 — вводный абзац, текст страницы */
  --u-text-xl:1.25rem;     /* 20 — заголовок карточки */
  --u-text-2xl:clamp(1.625rem,2.8vw,2.25rem);   /* 26–36 — заголовок раздела */
  --u-text-3xl:clamp(2.125rem,4.3vw,3.625rem);  /* 34–58 — главный вывод */
  --u-text-num:clamp(2.5rem,4vw,4rem);          /* 40–64 — крупная цифра */
  --u-leading:1.6;
  --u-leading-tight:1.1;
  --u-tracking-tight:-.03em;
  --u-w-regular:400; --u-w-medium:500; --u-w-semibold:600;

  /* ---- отступы (шаг 4) ---- */
  --u-s1:4px; --u-s2:8px; --u-s3:12px; --u-s4:16px; --u-s5:24px; --u-s6:32px; --u-s7:48px; --u-s8:72px;

  /* ---- радиусы: только эти четыре ---- */
  --u-r-sm:8px; --u-r-md:12px; --u-r-lg:18px; --u-r-xl:24px; --u-r-pill:999px;

  /* ---- раскладка ---- */
  --u-content:1240px;
  --u-reader-width:82ch;
  --u-gutter:32px;
  --u-bar-h:64px;
  --u-tap:44px;            /* минимальная высота нажимаемого */

  /* ---- движение ---- */
  --u-ease:cubic-bezier(.2,.7,.2,1);
  --u-fast:.18s; --u-mid:.32s; --u-slow:.8s;

  /* ---- светлая тема ---- */
  --u-bg:#F4F3EF;
  --u-surface:#FFFFFF;
  --u-surface-2:#F9F8F5;
  --u-surface-3:#F1EFEA;
  --u-ink:#0E1014;
  --u-ink-2:#363B44;
  --u-muted:#61666D;
  --u-faint:#9A9EA6;        /* только для линий, значков и плейсхолдеров — не для текста, который надо прочитать */
  --u-line:rgba(14,16,20,.08);
  --u-line-2:rgba(14,16,20,.14);

  --u-accent:#3550D4;        /* главное действие и активное состояние */
  --u-accent-hover:#2A43BC;
  --u-accent-ink:#FFFFFF;
  --u-accent-soft:#ECEFFD;

  --u-ok:#1E7451;            /* только подтверждённый результат */
  --u-ok-soft:#E4F3EB;
  --u-warn:#8F5E12;          /* ожидание, внимание, «не назвали» */
  --u-warn-soft:#FBF1DF;
  --u-danger:#B4382F;        /* ошибка, запрет, риск */
  --u-danger-soft:#FBE9E7;

  --u-mark:rgba(53,80,212,.14);   /* подсветка добавленного текста */
  --u-mark-line:#3550D4;

  --u-shadow-1:0 1px 2px rgba(14,16,20,.05),0 1px 1px rgba(14,16,20,.03);
  --u-shadow-2:0 1px 2px rgba(14,16,20,.04),0 8px 24px -6px rgba(14,16,20,.10);
  --u-shadow-3:0 2px 4px rgba(14,16,20,.04),0 24px 60px -12px rgba(14,16,20,.18);

  /* тёмный верх экрана — одинаков в обеих темах */
  --u-hero:#0A0C11;
  --u-hero-ink:#F4F5F7;
  --u-hero-2:#B9BEC8;
  --u-hero-muted:#7F8692;
  --u-hero-line:rgba(255,255,255,.09);
  --u-hero-glow:rgba(84,110,255,.32);
  --u-hero-ok:#4CC48C;
  --u-hero-warn:#F1C27D;

  /* цвета групп источников (диаграммы) */
  --u-cat-1:#3550D4; --u-cat-2:#7A5AF8; --u-cat-3:#0E9384; --u-cat-4:#C4320A; --u-cat-5:#A8701A;

  color-scheme:light;
}

[data-u-theme="dark"]{
  --u-bg:#0B0D11;
  --u-surface:#12151B;
  --u-surface-2:#161A21;
  --u-surface-3:#1B2029;
  --u-ink:#F1F2F4;
  --u-ink-2:#C9CDD5;
  --u-muted:#8C929D;
  --u-faint:#646B76;
  --u-line:rgba(255,255,255,.07);
  --u-line-2:rgba(255,255,255,.13);
  --u-accent:#7D92FF;
  --u-accent-hover:#93A4FF;
  --u-accent-ink:#0B0D11;
  --u-accent-soft:rgba(125,146,255,.13);
  --u-ok:#4CC48C; --u-ok-soft:rgba(76,196,140,.12);
  --u-warn:#E5A94E; --u-warn-soft:rgba(229,169,78,.12);
  --u-danger:#F07A6E; --u-danger-soft:rgba(240,122,110,.12);
  --u-mark:rgba(125,146,255,.2); --u-mark-line:#7D92FF;
  --u-shadow-1:none;
  --u-shadow-2:0 0 0 1px rgba(255,255,255,.04),0 12px 32px -8px rgba(0,0,0,.6);
  --u-shadow-3:0 0 0 1px rgba(255,255,255,.05),0 30px 70px -14px rgba(0,0,0,.75);
  --u-hero:#07080B;
  color-scheme:dark;
}

@media (max-width:720px){ :root{ --u-gutter:16px; --u-bar-h:58px; } }