/* Токены QAExpert — имена совпадают с code syntax переменных Figma
   (коллекции «qaexpert» режим qa-studio-by, «Мобильные блоки», «viewport»). */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* color/* — qaexpert */
  --color-page: #fdfdff;
  --color-page-alt: #f5f4fa;
  --color-surface: #f5f4fa;
  --color-surface-alt: #ffffff;
  --color-nest: #e2dff1;
  --color-placeholder: #c7c3dd;
  --color-line: #e2dff1;
  --color-ink: #140d30;
  --color-ink-muted: #383451;
  --color-ink-faint: #4f4a6a;
  --color-ink-legal: #5a5478;
  --color-cta: #8422ff;
  --color-cta-hover: #4d06a7;
  --color-on-cta: #ffffff;
  --color-accent-soft: #efe8ff;
  --color-accent-ink: #8b2be2;
  --color-success: #00be14;
  --color-success-ink: #00522b;
  --color-success-soft: #f4f9f5;
  --color-success-line: #d6f2d9;
  --color-danger: #6b6880;
  --color-danger-soft: #f1f0f5;

  /* decor/* */
  --decor-violet: #8422ff;
  --decor-violet-deep: #4d06a7;
  --decor-lilac: #c9bfff;
  --decor-violet-24: rgb(132 34 255 / 0.24);
  --decor-violet-10: rgb(132 34 255 / 0.1);
  --decor-green-24: rgb(0 190 20 / 0.24);

  /* spacing/* · radius/* · size/* */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-button: 12px;
  --radius-button-sm: 8px;
  --radius-full: 999px;
  --size-control: 48px;
  --size-control-sm: 36px;
  --size-field: 52px;

  /* viewport: mobile */
  --layout-gutter: 24px;
  --layout-section: 48px;
  --layout-head: 32px;
  --layout-card: 24px;
  --layout-card-y: 16px;
  --grid-column-gap: 16px;
  --header-h: 64px;

  --font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-reveal: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* viewport: desktop — раскладка «10 · Макет 1440» с 1024 px */
@media (min-width: 1024px) {
  :root {
    --layout-gutter: 32px;
    --layout-section: 96px;
    --layout-head: 48px;
    --layout-card: 32px;
    --layout-card-y: 32px;
    --grid-column-gap: 24px;
    --header-h: 56px;
  }
}