/* Hallmark · genre: modern-minimal · macrostructure: Marquee Hero
 * H1 hero knobs: size=xl, alignment=left-bias
 * nav: N9 edge-aligned minimal (wordmark=sans, padding=default)
 * theme: design.md (locked system) · paper oklch(98.3% 0.003 90) · accent oklch(45% 0.062 230)
 * display: Golos Text · body: Golos Text · название продукта: системный шрифт
 *
 * Заявленные отступления от залоченной системы:
 *  1. Marquee Hero обычно запрещает CTA в первом экране. Оставлен намеренно —
 *     страница загрузки, которая прячет загрузку, сломана. Здесь герой ещё и
 *     единственная секция: он занимает экран целиком.
 *  2. design.md запрещает градиенты и движение сверх минимума, а также
 *     анимацию свойств раскладки. Два компонента Aceternity внесены по
 *     прямому требованию заказчика и нарушают это осознанно:
 *       · container-text-flip анимирует width (в этом весь компонент);
 *       · buttons Windows/Linux несут бегущий радиальный блик по периметру.
 *     Оба выключаются целиком при prefers-reduced-motion, оба берут цвет
 *     из --color-accent, ни один не вводит второго хроматического цвета.
 */


:root {
  /* ── Цвет ─────────────────────────────────────────────── */
  --color-paper:          oklch(98.3% 0.003 90);
  --color-surface:        oklch(99.6% 0.002 90);
  --color-ink:            oklch(18%   0.004 90);
  --color-ink-muted:      oklch(48%   0.005 90);
  --color-rule:           oklch(91%   0.003 90);
  --color-control-border: oklch(58%   0.005 90);  /* ≥3:1 к бумаге — WCAG 1.4.11 */
  --color-hover:          oklch(94.5% 0.003 90);
  --color-accent:         oklch(45%   0.062 230);
  --color-accent-hover:   oklch(38%   0.058 230);
  --color-on-ink:         oklch(98.5% 0.002 90);

  /* ── Шрифты ───────────────────────────────────────────── */
  --font-sans: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Название продукта. Намеренно без подключённых начертаний: их сабсеты
     собраны под текст прежней страницы и заглавных Г, О, С, Р, М не содержат
     (см. .brand в page.css). */
  --font-brand: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ── Типографическая шкала ────────────────────────────── */
  --text-display:  3.375rem;  /* 54px */
  --lead-display:  1.02;
  --track-display: -0.035em;  /* плотнее по референсу экрана входа */


  --text-h3:       1.3125rem; /* 21px */
  --lead-h3:       1.3;
  --track-h3:      -0.008em;

  --text-lead:     1.25rem;   /* 20px */
  --lead-lead:     1.5;

  --text-body:     1.125rem;  /* 18px */
  --lead-body:     1.55;

  --text-caption:  0.9375rem; /* 15px */
  --lead-caption:  1.45;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;   /* только дисплей — как на экране входа */

  /* ── Отступы (4pt) ────────────────────────────────────── */
  --space-3xs: 0.25rem;  /*   4px */
  --space-2xs: 0.5rem;   /*   8px */
  --space-xs:  0.75rem;  /*  12px */
  --space-sm:  1rem;     /*  16px */
  --space-md:  1.5rem;   /*  24px */
  --space-lg:  2rem;     /*  32px */
  --space-xl:  3rem;     /*  48px */
  --space-2xl: 4rem;     /*  64px */
  --space-3xl: 6rem;     /*  96px */
  --space-4xl: 8rem;     /* 128px */

  /* ── Раскладка ────────────────────────────────────────── */
  /* ОДНА ширина на всю страницу — и, значит, ровно один правый край.
     Две ширины были бы оправданы, если бы внешнюю кто-то занимал; пока
     скриншота нет, её не занимает никто, и полоса-призрак просто сдвигает
     всю страницу влево. Вернуть 71.875rem вместе с реальным скриншотом,
     который сможет её заполнить. */
  --page-max:     60rem;     /* 960px */
  --page-pad:     var(--space-md);
  --measure:      68ch;      /* мера прозы */
  --measure-title: 20ch;     /* мера дисплейного заголовка */
  --measure-lead:  46ch;     /* мера подзаголовка героя */

  /* ── Радиусы ──────────────────────────────────────────── */
  /* Пилюля — голос самого продукта: на экране входа обе кнопки полностью
     скруглены. Канон предписывал 10px, унаследованные от адаптации ChatGPT;
     реальный бренд перевесил. */
  --radius-btn:     9999px;
  --radius-surface: 14px;

  /* ── Линии ────────────────────────────────────────────── */
  --rule-hairline: 1px;
  --rule-medium:   1.5px;  /* штрих шеврона: 1px на 9px глифе теряется */

  /* ── Движение ─────────────────────────────────────────── */
  --dur-fast:    120ms;
  --ease-out:    cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Два компонента Aceternity. Значения — оригинальные: контейнер морфит
     ширину за animationDuration/2, буквы проявляются за animationDuration,
     лесенка 20мс, слово держится 3с, блик обходит периметр за 3с. */
  --dur-flip:         350ms;
  --dur-flip-letter:  700ms;
  --dur-flip-stagger: 20ms;
  --dur-flip-hold:    3000ms;
  --dur-orbit:        3000ms;
  --orbit-size:       5rem;   /* диаметр блика, как в оригинале (h-20 w-20) */

  /* ── Слои ─────────────────────────────────────────────── */
  --z-nav: 10;
}

@media (max-width: 48rem) {
  :root {
    --text-display: 2.5rem;   /* 40px */
  }
}

@media (max-width: 25.875rem) {
  :root {
    --text-display: 2rem;     /* 32px */
    --page-pad:     var(--space-sm);
  }
}