/*
 * Ядро дизайн-системы Vymi: роли цвета, шкалы, движение.
 * Единственный источник значений интерфейса — правила в ./DESIGN.md.
 * Значения перенесены со стенда docs/design-bench.html (сверено 27.10.2026).
 * Акцент сайта задаёт тема (themes/anime.css), ядро от аниме не зависит.
 */
:root {
  color-scheme: dark;
  /* ядро Vymi */
  --brand: #7c4dff;
  /* нейтрали: всё выводится из холста */
  --canvas: #0b0b0f;
  --surface: color-mix(in srgb, var(--canvas), #fff 4%);
  --surface-2: color-mix(in srgb, var(--canvas), #fff 8%);
  --surface-3: color-mix(in srgb, var(--canvas), #fff 13%);
  --line: rgb(255 255 255 / 0.08);
  --line-strong: rgb(255 255 255 / 0.16);
  --text: #f4f4f6;
  --text-2: #a9a9b3;
  --text-3: #8a8a96;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  --scrim: rgb(0 0 0 / 0.6);

  /* шрифты */
  /* --font-onest и --font-geist-mono ставит next/font в app/layout.tsx */
  --font-text: var(--font-onest), system-ui, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, monospace;
  --font-mark: var(--font-text);

  /* шкала текста */
  --t-display: 56px; --lh-display: 1.02;
  --t-h1: 32px; --lh-h1: 1.12;
  --t-h2: 24px; --lh-h2: 1.2;
  --t-h3: 18px; --lh-h3: 1.3;
  --t-body: 16px; --lh-body: 1.55;
  --t-sm: 14px; --lh-sm: 1.45;
  --t-cap: 12px; --lh-cap: 1.35;
  --t-mono: 13px;

  /* отступы */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gutter: 40px;

  /* радиусы */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-full: 999px;

  /* контролы */
  --h-sm: 32px; --h-md: 40px; --h-lg: 48px; --tap: 44px;

  /* движение */
  --d-press: 110ms; --d-quick: 220ms; --d-base: 340ms; --d-slow: 520ms; --d-release: 640ms; --d-hero: 1100ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-color: cubic-bezier(0.25, 0.1, 0.25, 1);
  --spring: linear(0, 0.03, 0.105, 0.207, 0.32, 0.435, 0.545, 0.644, 0.732, 0.806, 0.867, 0.915, 0.953, 0.981, 1.001, 1.012, 1.016, 1.015, 1.012, 1.009, 1.006, 1.004, 1.002, 1);
  --frame: 83ms; /* один кадр «на двойках»: 12 fps */

  /* роли, найденные при сверке стенда */
  --t-title: 40px;                       /* заголовок страницы тайтла */
  --on-media: #fff;                      /* текст и иконки поверх кадра */
  --on-media-2: rgb(255 255 255 / 0.78);
  --on-media-3: rgb(255 255 255 / 0.6);
  --media-bg: #000;                      /* фон видео */
  --fill-1: rgb(255 255 255 / 0.06);     /* наведение */
  --fill-2: rgb(255 255 255 / 0.1);      /* нажатие, обводка стекла */
  --fill-3: rgb(255 255 255 / 0.18);     /* дорожки, неактивные клетки */
  --fill-4: rgb(255 255 255 / 0.28);     /* отметки на дорожке, рамка при наведении */
  --shade-1: rgb(0 0 0 / 0.4);
  --shade-2: rgb(0 0 0 / 0.55);
  --shade-3: rgb(0 0 0 / 0.8);
  --glass: rgb(12 12 16 / 0.5);          /* материал поверх кадра и арта */
  --shadow-pop: 0 24px 60px rgb(0 0 0 / 0.55);
  --gap-icon: 6px;                       /* иконка + подпись */
  --d-exit: 160ms; --d-zoom: 700ms; --d-drift: 1600ms; --stagger: 55ms;
}

/* поля экрана: 16 телефон · 24 планшет · 40 ПК */
@media (max-width: 759px) { :root { --gutter: 16px; } }
@media (min-width: 760px) and (max-width: 1099px) { :root { --gutter: 24px; } }