/* ALTEGO — дизайн-токены. Вся шкала чётная и кратная: кегли 10/12/14/16/20/24/32/40/56/72/96,
   отступы 4/8/12/16/24/32/48/64/96/128, скругления 8/16/24/32/999. Дробных значений нет,
   поэтому макет одинаково ложится в Figma, в CSS и в After Effects.
   Тема одна — светлая: бюст в hero непрозрачный, и под него нужен ровный фон. */
:root{
  /* цвет: фон и чернила */
  --bg:#EDEFF3;
  --surface:#FFFFFF;
  --ink:#0E1116;
  --ink-2:#565D68;
  --ink-3:#8D949E;
  --hair:rgba(14,17,22,.08);

  /* цвет: стекло поверх изображения */
  --glass:rgba(255,255,255,.44);
  --glass-strong:rgba(255,255,255,.70);
  --glass-edge:rgba(255,255,255,.90);
  --glass-inner:rgba(255,255,255,.60);

  /* цвет: смысловые метки стилей (фон иконок и карточек) */
  --tone-real:#B9C0CC;
  --tone-toy:#F3D3A8;
  --tone-cyber:#2B2350;
  --tone-anime:#CFE1F7;
  --tone-chrome:#CECCD8;
  --ok:#12A150;

  /* типографика */
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --size-10:10px;  --lh-10:16px;
  /* Микронадписи — капслок колонтитулов, подписи под карточками, заголовки
     колонок в подвале. Единственная величина в шкале, которая зависит от
     ширины экрана: 10px на телефоне читаются нормально, а на десктопе, где
     расстояние до экрана больше, мельчат. Интерлиньяж общий, 16px подходит
     обоим кеглям. */
  --size-micro:12px;
  --size-12:12px;  --lh-12:16px;
  --size-14:14px;  --lh-14:20px;
  --size-16:16px;  --lh-16:24px;
  --size-20:20px;  --lh-20:28px;
  --size-24:24px;  --lh-24:32px;
  --size-32:32px;  --lh-32:40px;
  --size-40:40px;  --lh-40:48px;
  --size-56:56px;  --lh-56:56px;
  --size-72:72px;  --lh-72:72px;
  --size-96:96px;  --lh-96:96px;
  --track-tight:-.03em;      /* заголовки */
  --track-head:-.02em;       /* подзаголовки */
  --track-caps:.06em;        /* мелкие надписи капсом */

  /* отступы и сетка */
  --space-4:4px;   --space-8:8px;   --space-12:12px; --space-16:16px;
  --space-24:24px; --space-32:32px; --space-40:40px; --space-48:48px; --space-64:64px;
  --space-96:96px; --space-128:128px;
  --gutter:24px;             /* поля страницы на мобильном */
  --gutter-lg:48px;          /* поля страницы на десктопе */
  --max-w:1280px;            /* ширина контента */
  --text-gap:24px;           /* запас между строкой и краем колонки */

  /* скругления */
  --r-8:8px; --r-16:16px; --r-24:24px; --r-32:32px; --r-pill:999px;

  /* тени: одна мягкая для карточек, одна глубокая для стекла и кнопок */
  --shadow-card:0 8px 24px -8px rgba(24,32,48,.16);
  --shadow-float:0 24px 48px -20px rgba(24,32,48,.28),0 6px 14px -6px rgba(24,32,48,.12);
  --shadow-btn:0 16px 32px -12px rgba(14,17,22,.44);

  /* эффекты */
  --blur-glass:24px;
  --saturate-glass:150%;

  /* движение */
  --dur-fast:200ms;
  --dur-base:300ms;
  --dur-slow:600ms;
  --ease:cubic-bezier(.16,1,.3,1);       /* выход: быстро стартует, мягко тормозит */
  --spring:cubic-bezier(.22,1.2,.36,1);  /* лёгкий перелёт для кнопок и карточек */

  color-scheme:light;
}

@media (max-width:760px){
  /* Колонок на телефоне нет, и от края экрана текст уже отделён полем
     страницы — второй запас только сужал бы и без того узкую строку. */
  :root{ --gutter-lg:24px; --text-gap:0px; --size-micro:10px; }
}