/* Размеры, шрифты, пропорции. Цветов здесь нет — они в themes.css. */

:root {
  /* Inter вариативный, толщины 400–800. Сделан для экранов и мелкого
     текста, кириллица полная. Системные шрифты за ним — подстраховка,
     пока он грузится или если сети нет. */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* Пропорции макета — телефон 390 × 844 */
  --design-width: 390;
  --design-height: 844;

  /* Скругление самой колонки. В пикселях, а не в cqw: шкала живёт
     на .layout, а колонка находится уровнем выше. */
  --r-app: 22px;

  /* Поле сверху и снизу на мониторе. Здесь же, а не в шкале, и по той
     же причине. Растёт вместе с окном, но в пределах: на ноутбуке
     отступ не съедает экран, на большом мониторе не теряется. */
  --app-gap: clamp(16px, 3vh, 40px);

  /* Движение. Кривая одна на весь проект: быстрый старт и мягкое
     торможение — так движение выглядит живым, а не механическим.
     Готовых ease и linear не используем: первый вялый, второй резкий. */
  --ease: cubic-bezier(.2, .8, .25, 1);
  --fast: .18s;   /* отклик на нажатие, смена цвета */
  --base: .28s;   /* появление экрана, раскрытие */
  --slow: .45s;   /* полосы прогресса — им нужно время, чтобы заметили */
}

/* Шкала размеров в долях ширины контейнера: cqw = px ÷ 390 × 100.
   Живёт на .layout: cqw считается от контейнера .app, а переменные
   наследуются вниз — их видят и шапка, и содержимое, и меню. */
.layout {
  --fs-xs:  3.08cqw;   /* 12 */
  --fs-sm:  3.59cqw;   /* 14 */
  --fs-md:  4.10cqw;   /* 16 */
  --fs-lg:  5.13cqw;   /* 20 */
  --fs-xl:  7.18cqw;   /* 28 */
  --fs-2xl: 9.74cqw;   /* 38 */

  --sp-1:   1.03cqw;   /*  4 */
  --sp-2:   2.05cqw;   /*  8 */
  --sp-3:   3.08cqw;   /* 12 */
  --sp-4:   4.10cqw;   /* 16 */
  --sp-5:   5.13cqw;   /* 20 */
  --sp-6:   6.15cqw;   /* 24 */
  --sp-8:   8.21cqw;   /* 32 */
  --sp-10: 10.26cqw;   /* 40 */

  --r-sm: 2.05cqw;   /*  8 */
  --r-md: 3.33cqw;   /* 13 — поля и кнопки */
  --r-lg: 4.87cqw;   /* 19 */

  /* Высота поля и главной кнопки — одна на всё, чтобы форма
     читалась как ряд одинаковых блоков. */
  --control: 16.9cqw;   /* 66 */
}