/* Сгенерировано из packages/wai-design/tokens/wai.tokens.json, версия 0.2.0. Не править руками: pnpm tokens:build */
:root {
  color-scheme: light;

  /* Поверхности, чернила, линии и три направления */
  --canvas: #ffffff; /* страница */
  --paper: #f0f0f0; /* мягкое поле, плитки */
  --card: #fafafa; /* карточка на белом */
  --tile: #eceeed; /* рамка виджета в Wabi */
  --dark: #191919; /* тёмная поверхность */
  --dark-2: #0f0f0f;
  --ink: #191919; /* основной текст */
  --ink-2: #5b5b5b; /* второй текст */
  --ink-3: #8d8d8d; /* третий текст, подписи */
  --grey-500: #737373;
  --ink-07: rgba(25, 25, 25, .07);
  --ink-14: rgba(25, 25, 25, .14);
  --ink-40: rgba(25, 25, 25, .40);
  --ink-60: rgba(25, 25, 25, .60);
  --ink-70: rgba(25, 25, 25, .70);
  --on-dark: #f0f0f0; /* текст на тёмном */
  --on-dark-2: rgba(240, 240, 240, .6);
  --hair: rgba(25, 25, 25, .12); /* линия */
  --hair-soft: rgba(25, 25, 25, .07);
  --hair-strong: rgba(25, 25, 25, .18);
  --school: #fac581; /* детская школа */
  --school-tint: #fdebd6;
  --school-ink: #8a5a1b; /* текст школы на светлом */
  --adult: #ed9dc4; /* взрослое обучение */
  --adult-tint: #f9e3ee;
  --adult-ink: #9a4a7a;
  --dev: #191919; /* разработка */
  --dev-tint: #e6e6e4;
  --dev-ink: #191919;

  /* Шрифт: один бесплатный гротеск Onest с кириллицей и латиницей. 400 и 500 для текста, 700 для словесного знака */
  --font-ui: "Onest";
  --font-sans: var(--font-ui), system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-serif: var(--font-sans); /* серифа в системе нет, hero тем же шрифтом */
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700; /* только словесный знак WAI */

  /* Кегли для веба. Формулы Wabi, в скобках значение на 1440 */
  --text-display: clamp(40px, 6.6vw, 88px); /* hero (88) */
  --text-display-lh: 0.99;
  --text-display-ls: -.04em;
  --text-h1: clamp(40px, 6.6vw, 88px); /* большой заголовок (88) */
  --text-h1-lh: 0.99;
  --text-h2: clamp(32px, 4.4vw, 58px); /* заголовок секции (58) */
  --text-h2-lh: 1.02;
  --text-headline-ls: -.04em; /* трекинг заголовков */
  --text-h3: clamp(23px, 2.1vw, 32px); /* заголовок карточки (30) */
  --text-h3-lh: 1.1;
  --text-h3-ls: -.025em;
  --text-lead: clamp(18.7px, 1.98vw, 25.3px); /* подзаголовок секции (25.3) */
  --text-lead-lh: 1.45;
  --text-lead-ls: -.015em;
  --text-body-l: clamp(17px, 1.35vw, 22px); /* текст в карточке (19.4) */
  --text-body: 15px; /* интерфейс и текст */
  --text-body-lh: 1.5;
  --text-body-ls: -.011em;
  --text-small: 14.5px; /* подписи, футер */
  --text-caption: 13px;
  --text-micro: 11px;
  --text-eyebrow: 12px; /* надзаголовок: 500, .08em, прописные */
  --text-nav: clamp(14px, 1.35vw, 20px); /* ссылки шапки (19.4) */
  --text-nav-ls: -.02em;
  --text-button: 15px;
  --text-button-l: 19.2px;
  --text-button-ls: -.011em;

  /* Ритм, кратен 4 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Сетка страницы */
  --wide: 1180px; /* контейнер Wabi */
  --narrow: 760px; /* текстовая колонка */
  --gut: clamp(20px, 4vw, 44px); /* поле страницы */
  --nav-h: 96px; /* шапка в покое; при прокрутке сжимается до 64 */
  --nav-h-s: 72px; /* шапка на планшете */
  --nav-h-scrolled: 64px;
  --section-y: clamp(128px, 14vw, 224px); /* вертикаль секции, воздух как у Wabi */

  /* Виджеты-плитки */
  --wtile: 218px; /* плитка виджета на десктопе */
  --wtile-s: 158px;
  --wgap: 32px;
  --wgap-s: 15px;
  --wradius: 16px; /* 13px на малых */
  --widget-corner: 16.67%; /* скругление рамки виджета в телефоне */

  /* Радиусы */
  --r-xs: 8px;
  --r-s: 13px;
  --r-m: 16px;
  --r-l: 22px;
  --r-xl: 24px; /* карточка Clonk */
  --r-pill: 999px;

  /* Контролы: высоты */
  --control-s: 36px;
  --control: 48px;
  --control-l: 56px; /* кнопка шапки Wabi */
  --control-xl: 64px; /* кнопка hero */

  /* Обводка и тень по Clonk: кольцо 1 px и мягкая смещённая тень */
  --ring: 0 0 0 1px rgba(25, 25, 25, .10);
  --ring-soft: 0 0 0 1px rgba(25, 25, 25, .06);
  --ring-on-dark: 0 0 0 1px rgba(255, 255, 255, .14);
  --shadow-control: 0 1px 2px rgba(25, 25, 25, .06), 0 10px 24px -12px rgba(25, 25, 25, .28);
  --shadow-control-hover: 0 1px 2px rgba(25, 25, 25, .06), 0 14px 30px -12px rgba(25, 25, 25, .34);
  --shadow-dark-control: 0 12px 28px -14px rgba(25, 25, 25, .7), inset 0 1px 0 rgba(255, 255, 255, .12);
  --shadow-sheet: 0 1px 2px rgba(25, 25, 25, .04), 0 12px 28px -12px rgba(25, 25, 25, .14); /* Wabi --sheet */
  --shadow-card: 0 1px 2px rgba(25, 25, 25, .04), 0 30px 70px -38px rgba(25, 25, 25, .38); /* карточка Clonk */
  --shadow-widget: 0 3.4px 12px rgba(0, 0, 0, .10); /* рамка виджета Wabi */
  --shadow-window: 0 42px 64px -26px rgba(25, 25, 25, .10), 0 4px 12px -4px rgba(25, 25, 25, .045);

  /* Движение: один easing на всё, пружина только у переключателей */
  --ease: cubic-bezier(.25, 1, .5, 1); /* Wabi --ease-wabi */
  --ease-expo: cubic-bezier(.22, 1, .36, 1);
  --pop: cubic-bezier(.16, 1.42, .4, 1);
  --dur-1: 200ms;
  --dur-2: 400ms;
  --dur-3: 620ms;

  /* Слои */
  --z-page: 0;
  --z-fly: 20;
  --z-nav: 40;
  --z-dock: 60;
}

@media (max-width: 1024px) {
  :root {
    --nav-h: var(--nav-h-s);
    --wtile: 198px;
    --wgap: 20px;
    --wradius: 13px;
    --control-xl: var(--control-l);
  }
}

@media (max-width: 700px) {
  :root {
    --nav-h: 64px;
    --wtile: var(--wtile-s);
    --wgap: var(--wgap-s);
    --text-display: clamp(36px, 10.5vw, 52px);
    --text-h2: clamp(32px, 9vw, 44px);
    --text-lead: clamp(16px, 4.6vw, 20px);
    --section-y: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
  }
}