@layer tokens {
  :root {
    /* ---------- Цвет ---------- */
    --color-brand: #1abab6;
    --color-brand-deep: #238a88;
    --color-brand-tint: #e2f3f2;
    --color-brand-soft: rgb(35 138 136 / 0.1);
    --color-brand-veil: rgb(26 186 182 / 0.1);

    --color-ink: #021120;
    --color-ink-2: #303030;
    --color-ink-3: #505050;
    --color-body: #515151;
    --color-muted: #7d8597;

    --color-surface: #ffffff;
    --color-surface-2: #f8f9f9;
    --color-surface-3: rgb(29 44 70 / 0.03);
    --color-surface-dark: #021120;
    --color-surface-dark-2: #051d2a;

    --color-border: #e8e8e8;
    --color-border-light: rgb(255 255 255 / 0.3);
    --color-on-dark: #ffffff;
    --color-on-dark-muted: rgb(255 255 255 / 0.7);

    /* ---------- Типографика ---------- */
    --font-sans: "Tilda Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
      Roboto, "Helvetica Neue", Arial, sans-serif;

    --fs-display: clamp(2.125rem, 1.606rem + 2.308vw, 4.375rem);
    --fs-h1: clamp(2rem, 1.538rem + 2.051vw, 4rem);
    --fs-h2: clamp(1.75rem, 1.462rem + 1.282vw, 3rem);
    --fs-h3: clamp(1.625rem, 1.423rem + 0.897vw, 2.5rem);
    --fs-h4: clamp(1.5rem, 1.356rem + 0.641vw, 2.125rem);
    --fs-h5: clamp(1.375rem, 1.231rem + 0.641vw, 2rem);
    --fs-h6: clamp(1.312rem, 1.183rem + 0.577vw, 1.875rem);
    --fs-btn-lg: clamp(1.25rem, 1.139rem + 0.561vw, 1.8125rem);
    --fs-lead: clamp(1.125rem, 1.038rem + 0.385vw, 1.5rem);
    --fs-body-lg: clamp(1.031rem, 0.952rem + 0.353vw, 1.375rem);
    --fs-body: clamp(1rem, 0.928rem + 0.321vw, 1.312rem);
    --fs-body-sm: clamp(1rem, 0.942rem + 0.256vw, 1.25rem);
    --fs-sm: clamp(0.9375rem, 0.894rem + 0.192vw, 1.125rem);
    --fs-xs: clamp(0.9375rem, 0.923rem + 0.064vw, 1rem);
    --fs-2xs: clamp(0.8125rem, 0.798rem + 0.064vw, 0.875rem);
    --fs-3xs: clamp(0.75rem, 0.736rem + 0.064vw, 0.8125rem);
    --fs-4xs: 0.6875rem;

    --lh-tight: 1.1;
    --lh-snug: 1.2;
    --lh-normal: 1.4;
    --lh-relaxed: 1.5;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* ---------- Размеры и ритм ---------- */
    --shell-max: 107.5rem; /* 1720px — ширина контента в макете */
    --shell-narrow: 62.5rem; /* 1000px — колонка FAQ */
    --space-shell: clamp(1rem, -0.212rem + 5.385vw, 6.25rem);
    --space-section: clamp(3.5rem, 2.793rem + 3.141vw, 6.562rem);
    --space-section-lg: clamp(4rem, 3.192rem + 3.59vw, 7.5rem);
    --space-gutter: clamp(1rem, 0.885rem + 0.513vw, 1.5rem);

    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.625rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.25rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 2.5rem;
    --space-4xl: 3rem;
    --space-5xl: 4rem;

    /* ---------- Скругления ---------- */
    --radius-xs: 0.375rem; /* 6px — кнопки */
    --radius-sm: 0.5rem; /* 8px — карточка лота */
    --radius-md: 0.625rem; /* 10px — базовое скругление макета */
    --radius-lg: 1.5rem; /* 24px */
    --radius-pill: 62.5rem;

    /* ---------- Тени ---------- */
    --shadow-sm: 0 1px 2px rgb(2 17 32 / 0.04), 0 2px 8px rgb(2 17 32 / 0.04);
    --shadow-md: 0 4px 12px rgb(2 17 32 / 0.06), 0 12px 32px rgb(2 17 32 / 0.06);
    --shadow-lg: 0 8px 24px rgb(2 17 32 / 0.08), 0 24px 64px rgb(2 17 32 / 0.1);
    --shadow-brand: 0 8px 24px rgb(26 186 182 / 0.28);

    /* ---------- Движение ---------- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 150ms;
    --duration: 250ms;
    --duration-slow: 400ms;

    /* ---------- Слои ---------- */
    /* Шапка — sticky, поэтому создаёт свой контекст наложения:
       панель меню внутри неё, а затемнение обязано быть ниже шапки. */
    --z-scrim: 90;
    --z-header: 100;
    --z-nav-panel: 1;
    --z-skip-link: 200;

    --header-height: 4.875rem; /* 78px */
  }

  @media (max-width: 63.9375em) {
    :root {
      --header-height: 4rem;
    }
  }
}