/* 2. Семантика — роль цвета. Этим красятся страницы и холсты. Ссылается только на примитивы. */
:root{
  /* фоны: страница → панель → приподнятое */
  --bg:#0b0b0c;                       /* темнее панелей: slate-1 62% + чёрный */
  --panel:var(--slate-2);
  --panel2:var(--slate-3);
  --line:var(--slate-4);
  --line2:var(--slate-5);

  /* текст: основной → вторичный (и мелкий) → третичный (не для мелкого текста) */
  --ink:var(--slate-12);
  --ink2:var(--slate-11);
  --ink3:var(--slate-10);

  /* акцент — только главное действие; второй цвет — отклик на наведение */
  --acc:var(--indigo-9);
  --acc-hover:var(--indigo-10);
  --acc-text:var(--indigo-11);
  --on-acc:var(--white);
  --acc2:var(--pink-9);

  /* фирменные цвета градиентов (герой и плитка-призыв сайта) */
  --glow-1:#1c2a5c; --glow-base:#111218; --glow-2:#1f2f66;

  --ok:var(--grass-11); --warn:var(--amber-11); --danger:var(--tomato-11);

  /* шрифт */
  --font:"Inter",ui-sans-serif,-apple-system,system-ui,sans-serif;
  --font-display:var(--font);   /* заголовки; стиль может заменить */
  --font-mono:"Martian Mono",ui-monospace,monospace;

  /* отступы — сетка 8, половинные 4 и 12 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:80px; --sp-10:112px;

  /* радиусы: два значения + круг */
  --r-s:4px; --r:8px; --r-full:9999px;

  /* движение */
  --e-snap:cubic-bezier(.2,0,0,1);   --d-snap:.18s;   /* ховер, фокус */
  --e-move:cubic-bezier(.4,0,.2,1);  --d-move:.32s;   /* перестроения, меню */
  --e-reveal:cubic-bezier(.16,1,.3,1); --d-reveal:.7s; /* появление */

  /* фактура: зерно (белый шум) и сетка пикселей */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-page:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* квадрат 2px в левом верхнем углу клетки 16px (сайт: сетка пикселей героя) */
  --pixels:conic-gradient(at 2px 2px,transparent 75%,var(--line2) 0);
  --pixel-step:16px;
}