@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Palette layers follow docs/palette-layers.md and the p1–p10 matrix. */
  --rgb-p1-heading: 41 60 102;
  --rgb-p2-body: 96 109 139;
  --rgb-p3-button-text: 255 255 255;
  --rgb-p4-card: 238 248 252;
  --rgb-p5-card-alt: 12 175 246;
  --rgb-p6-form: 230 245 252;
  --rgb-p7-button: 16 108 220;
  --rgb-p8-icon: 41 60 102;
  --rgb-p9-card-accent: 20 174 234;
  --rgb-p10-section: 230 245 252;

  --rgb-surface: 255 255 255;
  --rgb-action-dark: 10 86 185;
  --rgb-line: 193 227 242;
  --rgb-highlight: 255 244 207;

  /* Compatibility aliases for the authored section CSS. */
  --rgb-page: var(--rgb-p10-section);
  --rgb-ink: var(--rgb-p1-heading);
  --rgb-ink-soft: var(--rgb-p2-body);
  --rgb-action: var(--rgb-p7-button);
  --rgb-sky: var(--rgb-p9-card-accent);

  --color-page: rgb(var(--rgb-page));
  --color-surface: rgb(var(--rgb-surface));
  --color-ink: rgb(var(--rgb-ink));
  --color-ink-soft: rgb(var(--rgb-ink-soft));
  --color-heading: rgb(var(--rgb-p1-heading));
  --color-copy: rgb(var(--rgb-p2-body));
  --color-button-text: rgb(var(--rgb-p3-button-text));
  --color-card: rgb(var(--rgb-p4-card));
  --color-card-alt: rgb(var(--rgb-p5-card-alt));
  --color-form: rgb(var(--rgb-p6-form));
  --color-action: rgb(var(--rgb-action));
  --color-action-dark: rgb(var(--rgb-action-dark));
  --color-icon: rgb(var(--rgb-p8-icon));
  --color-card-accent: rgb(var(--rgb-p9-card-accent));
  --color-section: rgb(var(--rgb-p10-section));
  --color-sky: rgb(var(--rgb-sky));
  --color-line: rgb(var(--rgb-line));

  --font-body: "Montserrat", Arial, sans-serif;
  --font-heading: var(--font-body);
  /* Ступени и начертание — материал тип-пресетов. Утилит не порождают:
     это сырьё, из которого собраны роли ниже, как --rgb-* для цвета. */
  --display-weight: 700;
  --display-tracking: -0.045em;
  --display-size-desktop: 3rem;
  --display-size-max: 3.5rem;

  /* Роли типографики. Имя в неймспейсе --text-* — это и есть имя утилиты:
     --text-display → text-display, вместе с интерлиньяжем и трекингом. */
  --text-display: 2.15rem;
  --text-display--line-height: 1.08;
  --text-display--letter-spacing: var(--display-tracking);
  --text-display--font-weight: var(--display-weight);
  /* Hero держит мобильный размер до 1024 и там прыгает — это осознанная
     ступень, одним clamp она не выражается: при 5vw рост начался бы с 688px. */
  --text-display-lg: clamp(var(--display-size-desktop), 5vw, var(--display-size-max));

  --text-title: 2rem;
  --text-title--line-height: 1.12;
  --text-title--letter-spacing: -0.04em;
  --text-title--font-weight: var(--display-weight);
  --text-title-lg: 3rem;

  --text-lead: 0.9375rem;
  --text-lead--line-height: 1.65;
  --text-lead-lg: 1.125rem;

  --text-body: 1rem;

  --layout-container-max: 77.5rem;
  --layout-gutter-mobile: 1.25rem;
  --layout-gutter-desktop: 2.5rem;
  --section-density: 1;
  --section-space-mobile: 5rem;
  --section-space-desktop: 8rem;
  --hero-media-min: 28.75rem;
  --hero-media-height: 42.5rem;

  --radius-control: 0.875rem;
  --radius-card: 1rem;
  --radius-media: 2.25rem;
  --shadow-soft: 0 14px 40px rgb(var(--rgb-ink) / 0.06);
  --shadow-lift: 0 30px 80px rgb(var(--rgb-ink) / 0.16);
  --shadow-action: 0 18px 38px rgb(var(--rgb-action) / 0.25);

  --control-height: 3.5rem;
  --motion-fast: 180ms;
  --easing-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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