:root {
  /* ---- brand channels ------------------------------------------------
     Тёмная система: базовая поверхность почти чёрная сине-фиолетовая,
     всё остальное выводится из неё. Для ребрендинга правят только каналы. */
  --rgb-abyss: 5 11 22;          /* самый глубокий фон, края страницы */
  --rgb-navy-900: 9 19 36;       /* основная поверхность */
  --rgb-navy-800: 14 27 48;      /* приподнятая поверхность, карточка */
  --rgb-navy-700: 22 38 64;      /* обводка карточки, разделители */
  --rgb-navy-500: 47 68 104;     /* линии блюпринта */
  --rgb-accent-600: 19 69 232;   /* нажатое состояние */
  --rgb-accent-500: 27 94 255;   /* электрический синий — акцент системы */
  --rgb-accent-400: 82 133 255;  /* иконки, тонкие обводки */
  --rgb-accent-100: 190 211 255;
  --rgb-bone: 242 239 232;       /* тёплый почти-белый: основной текст */
  --rgb-mist: 138 151 171;       /* вторичный текст */
  --rgb-on-accent: 255 255 255;  /* текст на акценте; решение палитры */

  --color-abyss: rgb(var(--rgb-abyss));
  --color-navy-900: rgb(var(--rgb-navy-900));
  --color-navy-800: rgb(var(--rgb-navy-800));
  --color-navy-700: rgb(var(--rgb-navy-700));
  --color-navy-500: rgb(var(--rgb-navy-500));
  --color-accent-600: rgb(var(--rgb-accent-600));
  --color-accent-500: rgb(var(--rgb-accent-500));
  --color-accent-400: rgb(var(--rgb-accent-400));
  --color-accent-100: rgb(var(--rgb-accent-100));
  --color-bone: rgb(var(--rgb-bone));
  --color-mist: rgb(var(--rgb-mist));
  --color-on-accent: rgb(var(--rgb-on-accent));

  /* ---- semantic surfaces --------------------------------------------- */
  --surface-page: var(--color-navy-900);
  --surface-deep: var(--color-abyss);
  --surface-card: var(--color-navy-800);
  --surface-accent: var(--color-accent-500);
  --border-card: rgb(var(--rgb-navy-700));

  /* ---- typography -----------------------------------------------------
     Одна гарнитура на всё. Контраст держится весом и кеглем, а не второй
     гарнитурой: в этом регистре антиква читалась бы как претензия. */
  --font-body: "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-heading: var(--font-body);

  /* Ступени и начертание — материал тип-пресетов. Утилит не порождают:
     это сырьё для ролей ниже, как --rgb-* для цвета. */
  --display-size-min: 2.2rem;
  --display-size-max: 3.5rem;
  --display-weight: 700;
  --display-tracking: -0.035em;

  /* Роли типографики. Имя в неймспейсе --text-* — это имя утилиты:
     --text-display → text-display, вместе с интерлиньяжем и трекингом. */
  --text-display: clamp(var(--display-size-min), 6.4vw, var(--display-size-max));
  --text-display--line-height: 0.98;
  --text-display--letter-spacing: var(--display-tracking);
  --text-display--font-weight: var(--display-weight);

  --text-title: 1.875rem;
  --text-title--font-weight: var(--display-weight);
  --text-title-md: 2.75rem;

  --text-lead: 1.0625rem;
  --text-lead-md: 1.25rem;

  --text-body: 1rem;
  --text-small: 0.875rem;

  --text-eyebrow: 0.6875rem;
  --text-eyebrow--letter-spacing: 0.18em;

  --text-metric: 3rem;

  /* ---- layout and rhythm ---------------------------------------------- */
  --layout-container-max: 82rem;
  --layout-page-gutter-mobile: 1.25rem;
  --layout-page-gutter-desktop: 3rem;
  --layout-content-measure: 36rem;
  --section-space-y-mobile: 4.5rem;
  --section-space-y-desktop: 7.5rem;
  --section-density: 1;
  --grid-gap-mobile: 1rem;
  --grid-gap-desktop: 1.5rem;
  --card-padding-mobile: 1.5rem;
  --card-padding-desktop: 2.25rem;

  /* ---- shape ----------------------------------------------------------
     Подпись: почти прямая кнопка против заметно скруглённой карточки. */
  --radius-control: 0.375rem;
  --radius-card: 1.25rem;
  --radius-media: 1.25rem;
  --radius-plate: 999px;
  --radius-chip: 0.875rem;
  --icon-stroke: 1.5;
  --hairline: 1px;

  /* ---- depth ----------------------------------------------------------
     На тёмном тень не работает — глубину даёт обводка и подсветка. */
  --shadow-card: 0 24px 60px rgb(var(--rgb-abyss) / 0.7);
  --shadow-accent: 0 20px 50px rgb(var(--rgb-accent-600) / 0.35);
  --glow-accent: 0 0 0 1px rgb(27 94 255 / 0.35);

  /* ---- controls -------------------------------------------------------- */
  --control-height: 3.5rem;
  --control-padding-x: 1.75rem;
  --icon-plate: 3.5rem;

  /* ---- blueprint layer -------------------------------------------------
     Аналог декор-кита: техническая сетка, дуги и пунктирные окружности.
     Это то, что делает страницу узнаваемой, а не просто тёмной. */
  --blueprint-line: rgb(var(--rgb-navy-500) / 0.5);
  --blueprint-arc: rgb(var(--rgb-accent-500) / 0.45);
  --blueprint-grid-size: 64px;
  --blueprint-opacity: 1;

  /* ---- motion ---------------------------------------------------------- */
  --motion-fast: 160ms;
  --motion-normal: 280ms;
  --easing-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 768px) {
  :root {
    --grid-gap-mobile: var(--grid-gap-desktop);
    --card-padding-mobile: var(--card-padding-desktop);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-normal: 0ms; }
}