/* ═══════════════════════════════════════════════════════════════════════════
   Токены дизайн-системы «Контур».

   Источник — .claude/skills/kontur-design/tokens/. Файлы склеены сюда как есть,
   вместе с комментариями: они объясняют решения, а не украшают. Правится
   не этот файл, а первоисточник в навыке — иначе две копии разойдутся молча.

   Двух файлов кита здесь нет и быть не должно:
   · fonts.css   — он подключает шрифты с fonts.googleapis.com, а мини-аппу
                   разрешён единственный внешний адрес, telegram.org. Локальные
                   объявления лежат ниже, сразу за токенами.
   · bodygraph.css — цвета центров уже перенесены в webapp/chart/chart.css
                   отдельной задачей. Второй копии быть не должно.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─────────── colors.css ─────────── */
:root{
/* ── Нейтральная база: белое и серое, без тёплых подмесов ── */
--paper-0:#FFFFFF;
--paper-1:#FAFAFA;
--paper-2:#F4F4F5;
--paper-3:#EBEBED;
--paper-4:#DEDEE1;

/* ── Чернила: текст и графика ───────────────────────────── */
--ink-0:#101012;
--ink-1:#26262A;
--ink-2:#5B5B63;
--ink-3:#686870;
--ink-4:#B6B6BD;

/* ── Линии ──────────────────────────────────────────────── */
--line-faint:rgba(16,16,18,.06);
--line-hair:rgba(16,16,18,.10);
--line-firm:rgba(16,16,18,.16);
--line-ink:rgba(16,16,18,.40);

/* ── Акцент: монохром. Единственный цвет в продукте —
      бодиграф, поэтому интерфейс держится на графите. ──── */
--accent-900:#000000;
--accent-700:#101012;
--accent-500:#3A3A41;
--accent-300:#B6B6BD;
--accent-100:#EBEBED;
--accent-050:#F4F4F5;
--on-accent:#FFFFFF;

/* ── Семантика ──────────────────────────────────────────── */
--signal-positive:#0F7B4F;
--signal-positive-bg:#E8F5EE;
--signal-caution:#8A5E00;
--signal-caution-bg:#FBF1DA;
--signal-critical:#B3261E;
--signal-critical-bg:#FBEAE8;
--signal-neutral:#5B5B63;
--signal-neutral-bg:#F4F4F5;

/* ── Прозрачность и стекло ──────────────────────────────── */
--veil-scrim:rgba(16,16,18,.44);
--veil-glass:rgba(255,255,255,.80);
--veil-glass-blur:14px;

/* ── Семантические алиасы ───────────────────────────────── */
--surface-app:var(--paper-1);
--surface-card:var(--paper-0);
--surface-sunken:var(--paper-2);
--surface-inset:var(--paper-3);
--surface-inverse:var(--ink-0);
--surface-brand:var(--accent-700);
--surface-brand-soft:var(--accent-050);

--text-primary:var(--ink-0);
--text-body:var(--ink-1);
--text-secondary:var(--ink-2);
--text-tertiary:var(--ink-3);
--text-disabled:var(--ink-4);
--text-inverse:var(--paper-0);
--text-brand:var(--accent-700);
--text-link:var(--accent-700);
--text-link-hover:var(--accent-900);

--border-subtle:var(--line-faint);
--border-default:var(--line-hair);
--border-strong:var(--line-firm);
--border-brand:var(--accent-700);
--border-focus:var(--ink-0);
}

[data-theme="dark"]{
--paper-0:#161618;
--paper-1:#0E0E10;
--paper-2:#1D1D20;
--paper-3:#26262A;
--paper-4:#323238;

--ink-0:#F5F5F7;
--ink-1:#E3E3E6;
--ink-2:#A1A1A8;
--ink-3:#8E8E96;
--ink-4:#54545C;

--line-faint:rgba(245,245,247,.07);
--line-hair:rgba(245,245,247,.12);
--line-firm:rgba(245,245,247,.20);
--line-ink:rgba(245,245,247,.45);

--accent-900:#E4E4E7;
--accent-700:#FFFFFF;
--accent-500:#C9C9CE;
--accent-300:#54545C;
--accent-100:#26262A;
--accent-050:#1D1D20;
--on-accent:#101012;

--signal-positive:#5FC392;--signal-positive-bg:#12241C;
--signal-caution:#E0B45F;--signal-caution-bg:#2A2213;
--signal-critical:#E88C82;--signal-critical-bg:#2B1917;
--signal-neutral:#A1A1A8;--signal-neutral-bg:#1D1D20;

--veil-scrim:rgba(0,0,0,.60);
--veil-glass:rgba(22,22,24,.80);
--border-focus:var(--ink-0);
}

/* ─────────── typography.css ─────────── */
:root{
--font-display:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
--font-ui:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

/* Интерфейсная шкала */
--text-3xs:10px;
--text-2xs:11px;
--text-xs:12px;
--text-sm:13px;
--text-base:15px;
--text-md:17px;
--text-lg:20px;
--text-xl:24px;
--text-2xl:30px;

/* Дисплейная шкала — тот же гротеск, крупно и плотно */
--display-xs:24px;
--display-sm:30px;
--display-md:38px;
--display-lg:48px;
--display-xl:64px;

--leading-tight:1.04;
--leading-snug:1.22;
--leading-normal:1.45;
--leading-relaxed:1.6;

--weight-light:300;
--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;

--track-tighter:-0.03em;
--track-tight:-0.015em;
--track-normal:0em;
--track-wide:0.02em;
--track-caps:0.08em;

/* Роли */
--type-display:var(--weight-semibold) var(--display-md)/var(--leading-tight) var(--font-display);
--type-title:var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-ui);
--type-heading:var(--weight-semibold) var(--text-md)/var(--leading-snug) var(--font-ui);
--type-body:var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-ui);
--type-body-strong:var(--weight-medium) var(--text-base)/var(--leading-relaxed) var(--font-ui);
--type-caption:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-ui);
--type-micro:var(--weight-medium) var(--text-2xs)/1.3 var(--font-ui);
--type-numeric:var(--weight-medium) var(--text-sm)/1 var(--font-mono);
--type-eyebrow:var(--weight-semibold) var(--text-2xs)/1.2 var(--font-ui);
}

/* ─────────── spacing.css ─────────── */
:root{
--space-0:0px;
--space-1:2px;
--space-2:4px;
--space-3:6px;
--space-4:8px;
--space-5:12px;
--space-6:16px;
--space-7:20px;
--space-8:24px;
--space-9:32px;
--space-10:40px;
--space-11:56px;
--space-12:72px;

--gutter-screen:16px;
--gutter-card:16px;
--gutter-section:24px;
--gap-list:1px;
--gap-stack:12px;
--gap-inline:8px;

--radius-xs:6px;
--radius-sm:10px;
--radius-md:16px;
--radius-lg:24px;
--radius-xl:32px;
--radius-pill:999px;
--radius-card:16px;
--radius-sheet:24px 24px 0 0;
--radius-control:12px;

--hit-min:44px;
--hit-comfortable:48px;
--tabbar-height:56px;
--topbar-height:52px;
--screen-max:440px;
}

/* ─────────── elevation.css ─────────── */
:root{
/* Минимализм: теней почти нет, глубина держится на волосяных линиях */
--shadow-none:none;
--shadow-hairline:0 0 0 1px var(--line-hair);
--shadow-raised:0 1px 2px rgba(16,16,18,.05);
--shadow-card:0 1px 3px rgba(16,16,18,.05),0 0 0 1px rgba(16,16,18,.05);
--shadow-popover:0 10px 32px -8px rgba(16,16,18,.16),0 0 0 1px rgba(16,16,18,.06);
--shadow-sheet:0 -10px 40px -12px rgba(16,16,18,.18);
--shadow-focus:0 0 0 3px rgba(16,16,18,.14);
--shadow-inset-press:inset 0 1px 2px rgba(16,16,18,.08);
}
[data-theme="dark"]{
--shadow-raised:0 1px 2px rgba(0,0,0,.4);
--shadow-card:0 1px 3px rgba(0,0,0,.35),0 0 0 1px rgba(245,245,247,.07);
--shadow-popover:0 10px 32px -8px rgba(0,0,0,.6),0 0 0 1px rgba(245,245,247,.09);
--shadow-sheet:0 -10px 40px -12px rgba(0,0,0,.6);
--shadow-focus:0 0 0 3px rgba(245,245,247,.20);
}

/* ─────────── motion.css ─────────── */
:root{
--dur-instant:80ms; /* @kind other */
--dur-fast:140ms; /* @kind other */
--dur-base:200ms; /* @kind other */
--dur-slow:300ms; /* @kind other */
--dur-slower:460ms; /* @kind other */

--ease-standard:cubic-bezier(.2,.8,.2,1); /* @kind other */
--ease-enter:cubic-bezier(0,0,.2,1); /* @kind other */
--ease-exit:cubic-bezier(.4,0,1,1); /* @kind other */
--ease-soft:cubic-bezier(.32,.72,0,1); /* @kind other */

--motion-press:transform var(--dur-instant) var(--ease-standard); /* @kind other */
--motion-fade:opacity var(--dur-base) var(--ease-standard); /* @kind other */
--motion-sheet:transform var(--dur-slow) var(--ease-soft); /* @kind other */
--motion-color:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);

--press-scale:0.975; /* @kind other */
--press-scale-tile:0.985; /* @kind other */
}
@media (prefers-reduced-motion:reduce){
:root{
--dur-instant:0ms; /* @kind other */
--dur-fast:0ms; /* @kind other */
--dur-base:0ms; /* @kind other */
--dur-slow:0ms; /* @kind other */
--dur-slower:0ms; /* @kind other */
--press-scale:1; /* @kind other */
--press-scale-tile:1; /* @kind other */
}
}

/* ─────────── platform.css ─────────── */
/* Системные поверхности: хедер, главная кнопка, фон вокруг содержимого.
   Значения — НАШИ, из тех же токенов, что и всё остальное.

   Раньше здесь стоял мост к теме Telegram (`var(--tg-theme-*, …)`), и он
   ломал приложение ровно тем, ради чего заводился. Тема клиента и наша
   `data-theme` — две независимые величины: человек один раз переключил
   тумблер на светлую, открыл мини-апп в тёмном Telegram — и получил нашу
   светлую чернильную типографику поверх тёмного фона клиента. Заголовок
   #101012 на фоне #17212b — это контраст 1,05:1, то есть текста не видно
   вовсе. Смешивать две палитры нельзя: либо целиком чужая, либо целиком
   своя. Здесь своя, и она согласована сама с собой в обеих темах. */
:root{
--platform-header-bg:var(--paper-0);
--platform-header-text:var(--ink-0);
--platform-main-button-bg:var(--accent-700);
--platform-main-button-text:var(--on-accent);
--platform-hint:var(--ink-3);
--platform-link:var(--accent-700);
--platform-viewport-bg:var(--paper-1);

--safe-top:env(safe-area-inset-top,0px);
--safe-bottom:env(safe-area-inset-bottom,0px);

--main-button-height:50px;
--platform-header-height:56px;
}

/* ─────────── base.css ─────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:var(--type-body);color:var(--text-body);background:var(--surface-app);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,figure{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--text-link) 32%,transparent);transition:var(--motion-color)}
a:hover{color:var(--text-link-hover);border-bottom-color:currentColor}
a:active{opacity:.7}
::selection{background:var(--accent-100);color:var(--ink-0)}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-radius:var(--radius-xs)}


/* ─────────── Шрифты, локально ───────────

   Кит подключает Onest и JetBrains Mono через @import с Google Fonts. Нам нельзя:
   правило проекта разрешает мини-аппу единственный внешний адрес — telegram.org,
   и tests/test_static.py это стережёт. Сам кит выход предусмотрел: «если у бренда
   появятся лицензионные файлы — положить в assets/fonts/».

   Взяты ПЕРЕМЕННЫЕ начертания: весь диапазон весов лежит в одном файле на
   подмножество, а не отдельным файлом на каждый вес. Кит объявляет пять весов
   Onest и три JetBrains Mono — статикой это было бы 13 файлов вместо трёх.

   JetBrains Mono только латиницей: по документации кита моно нужен «только для
   чисел — ворота, линии, координаты», а цифры латиницей и покрываются.

   Обе гарнитуры под SIL Open Font License 1.1, файл лицензии лежит рядом. */

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/static/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("/static/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: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/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;
}