/*
  Токени сторінки.
  Шрифти: Crimson Pro, Manrope, Geist Mono. Файли в assets/fonts/.
  Кегль кратний 4. Для кегля понад 12px інтерліньяж кратний 8.
  Крок відступів: 2, 4, далі кратне 8.
  Основні кольори — з дошки бренду. Додаткові — з фрейма LP у Figma,
  лише оболонка секцій, без внутрішньої палітри мокапа календаря.
*/

:root {
  --font-display: "Crimson Pro", "Iowan Old Style", "Palatino Linotype", serif;
  --font-text: "Manrope", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --font-size-12: 12px;
  --font-size-16: 16px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-32: 32px;
  --font-size-40: 40px;
  --font-size-48: 48px;
  --font-size-64: 64px;
  --font-size-80: 80px;
  --font-size-96: 96px;
  --font-size-112: 112px;

  --line-height-16: 16px;
  --line-height-24: 24px;
  --line-height-32: 32px;
  --line-height-40: 40px;
  --line-height-48: 48px;
  --line-height-56: 56px;
  --line-height-64: 64px;
  --line-height-72: 72px;
  --line-height-80: 80px;
  --line-height-96: 96px;
  --line-height-104: 104px;

  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-88: 88px;
  --space-96: 96px;
  --space-104: 104px;
  --space-112: 112px;
  --space-120: 120px;
  --space-128: 128px;

  /* Основні. Дошка бренду. */
  --color-white: #ffffff;
  --color-quiet-grey: #f5f5f5;
  --color-deep-ocean: #0763b9;
  --color-soft-black: #232323;
  --color-black: #000000;
  --color-bright-azure: #3590e4;
  --color-light-sky: #80c2ff;

  --color-canvas: var(--color-quiet-grey);
  --color-ink: var(--color-soft-black);
  --color-accent: var(--color-deep-ocean);

  /*
    Додаткові. Фрейм LP, 1920×6009, файл Elevate website.
    Сірі тексту в макеті розходяться на кілька кроків. Кожен зафіксований окремо.
  */
  --color-lp-canvas: #f7f7f9;
  --color-lp-headline: #111111;
  --color-lp-label: #1d1d1f;
  --color-lp-button: #054a8a;
  --color-lp-nav: #52525a;
  --color-lp-subhead: #5c5c63;
  --color-lp-text-bento: #5e5e65;
  --color-lp-text-connect: #63636a;
  --color-lp-text-cta: #66666d;
  --color-lp-eyebrow: #7a7a81;
  --color-lp-eyebrow-connect: #707077;
  --color-lp-footer-link: #5d5d63;
  --color-lp-platform: #77777d;
  --color-lp-footnote: #777982;
  --color-lp-meta: #8a8a90;
  --color-lp-on-dark: #b4b5bc;
  --color-lp-accent: #ff6a00;
  --color-lp-accent-soft: #ff7a2f;
  --color-lp-section: #f5f5f7;
  --color-lp-hero-edge: #eceef2;
  --color-lp-cta-edge: #e9edf6;
  --color-lp-glow: #a9c9ff;
  --color-lp-card-blue-start: #f7faff;
  --color-lp-card-blue-end: #dde8ff;
  --color-lp-card-blue-line: #376ce4;
  --color-lp-card-warm-end: #eeeae5;
  --color-lp-card-night-start: #141416;
  --color-lp-card-night-end: #23243a;
  --color-lp-card-ink-start: #0b0b0d;
  --color-lp-card-ink-end: #1d2233;
  --color-lp-night-start: #050506;
  --color-lp-night-mid: #0d0f16;
  --color-lp-night-end: #171526;
  --color-lp-violet-glow: #5d54ff;
  --color-lp-ember-glow: #ff5a1f;
  --color-lp-ember-soft: #ff8a3d;
  --color-lp-mark-start: #ff8a00;
  --color-lp-mark-end: #ff3d00;
  /* Галочка hero зі скріна контенту. У фреймі LP цього кольору немає. */
  --color-hero-check: #3d9a6c;

  --page-gutter: clamp(var(--space-16), 4vw, var(--space-40));
  --header-block: var(--space-72);
  --header-track: 1320px;

  /*
    Фон hero — заливка фрейма «01 / Hero», не окремий стиль.
    У файлі Elevate website шару mash-gradient-background немає.
    Радіал: центр #ffffff, 58% #f5f5f7, край #eceef2.
    Матриця Figma [[0.7, 0, 0.15], [0, 0.7, 0.02]]
    ставить центр на 50% 68.6% і розтягує радіус до 71.4%.
  */
  --hero-background:
    radial-gradient(
      ellipse 71.4% 71.4% at 50% 68.6%,
      var(--color-white) 0%,
      var(--color-lp-section) 58%,
      var(--color-lp-hero-edge) 100%
    );

  --motion-scale: 1;
}

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