/* Токены. Источник: Figma (p5fJWWQA7eaBQEFwDwnHUc). Значения вынесены в одно место,
   чтобы менять цвет или размер один раз. */


/* Шрифт Onest (SIL OFL, бесплатный). Подобран вместо платного Jeko из макета:
   вес выбран по плотности штриха, size-adjust выравнивает ширину текста с Jeko,
   поэтому размеры блоков, кнопок и полей остаются как в макете. */
@font-face{font-family:"Onest";font-weight:400;font-style:normal;font-display:swap;size-adjust:104.2%;src:url("../fonts/onest-400.woff2") format("woff2")}
@font-face{font-family:"Onest";font-weight:500;font-style:normal;font-display:swap;size-adjust:104.7%;src:url("../fonts/onest-500.woff2") format("woff2")}
@font-face{font-family:"Onest";font-weight:600;font-style:normal;font-display:swap;size-adjust:105%;src:url("../fonts/onest-600.woff2") format("woff2")}
@font-face{font-family:"Onest";font-weight:700;font-style:normal;font-display:swap;size-adjust:104.9%;src:url("../fonts/onest-700.woff2") format("woff2")}

:root{
  /* цвета */
  --ink:#000;
  --paper:#fff;
  --purple:#ae00e8;          /* основной акцент: кнопки */
  --purple-grain-a:#a61bd5;  /* зерно на hover */
  --purple-grain-b:#c20bff;
  --gray-fill:#8d8d8d;       /* отключённая кнопка */
  --gray-ink:#5d5d5d;        /* текст отключённой кнопки, рамка отключённого поля */
  --gray-field:#d9d9d9;      /* фон отключённого поля */
  --gray-hint:#8d8d8d;       /* плейсхолдер */
  --purple-clear:rgb(174 0 232 / 0);  /* прозрачный фиолетовый: подчёркивание проявляется без тёмной промежуточной линии */

  /* подчёркивание ссылок: толщина и отступ в долях шрифта, а не из метрик шрифта (у Onest линия слишком тонкая) */
  --ul-thick:max(1.5px, .085em);
  --ul-offset:.18em;

  /* шрифт: имена весов как в макете, номера подобраны под Onest */
  --fw-regular:400;   /* Jeko Regular */
  --fw-semibold:500;  /* Jeko SemiBold */
  --fw-bold:600;      /* Jeko Bold, Bold Italic */
  --fw-black:700;     /* Jeko Black */
  --font:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* Плавная шкала: значение растёт линейно от ширины 320 до 1920 px.
     fluid(мин, макс) = calc(мин + (макс - мин) * (100vw - 320px) / 1600) */
  /* все анимации: чуть замедленные, ease-out */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.36s;

  /* поля страницы и высота шапки */
  --page-pad:clamp(24px,7.5vw,48px);
  --hdr-h:clamp(72px,9vw,88px);

  --vw-min:320px;
  --vw-span:1600;

  /* кнопка */
  --btn-fs:clamp(16px, calc(16px + 8 * (100vw - 320px) / 1600), 24px);
  --btn-py:clamp(18px, calc(18px + 13 * (100vw - 320px) / 1600), 31px);
  --btn-px:clamp(22px, calc(22px + 13 * (100vw - 320px) / 1600), 35px);

  /* поле */
  --field-fs:clamp(14px, calc(14px + 8 * (100vw - 320px) / 1600), 22px);
  --field-bw:clamp(2px, calc(2px + 2 * (100vw - 320px) / 1600), 4px);
  --field-p:clamp(14px, calc(14px + 18 * (100vw - 320px) / 1600), 32px);
  --field-h:clamp(46px, calc(46px + 56 * (100vw - 320px) / 1600), 102px);
  --area-h:clamp(160px, calc(160px + 102 * (100vw - 320px) / 1600), 262px);
}