/* Primitive Thing — design tokens
   Источник: «Primitive Thing Web Direction» (MOAD), 03 · TYPOGRAPHY / COLOUR / INTERACTION.
   Три цвета, две гарнитуры. Четвёртого цвета нет — серый = чёрный с прозрачностью. */

:root {
  /* ─── Палитра ─── */
  --pt-pearl:   #FFF8ED;
  --pt-black:   #0C0807;
  --pt-oxblood: #4C0000;
  --pt-oxblood-hover: #3A0000;

  /* ─── Светлая секция (Pearl, ~70% страницы) ─── */
  --surface:      var(--pt-pearl);
  --ink:          var(--pt-black);           /* 18.9:1 */
  --ink-muted:    rgb(12 8 7 / 0.62);        /* 5.6:1 — единственный «серый» */
  --line:         rgb(12 8 7 / 0.14);
  --line-strong:  rgb(12 8 7 / 0.30);
  --accent:       var(--pt-oxblood);         /* 15.2:1 на pearl */
  --accent-ink:   var(--pt-pearl);           /* текст на oxblood, 15.2:1 */
  --focus:        var(--pt-oxblood);

  /* ─── Тёмная секция (Black, одна-две на страницу) ─── */
  --surface-dark:     var(--pt-black);
  --ink-on-dark:      var(--pt-pearl);
  --ink-muted-on-dark: rgb(255 248 237 / 0.62);  /* 7.4:1 */
  --line-on-dark:      rgb(255 248 237 / 0.18);
  --accent-on-dark:    var(--pt-pearl);      /* oxblood на чёрном = 1.24:1, запрещён */
  --focus-on-dark:     var(--pt-pearl);

  /* ─── Гарнитуры ─── */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;  /* только заголовки */
  --font-text:    "Archivo", system-ui, -apple-system, sans-serif; /* всё функциональное */

  /* ─── Шкала (fluid 375 → 1440) ─── */
  --size-hero:       clamp(2.75rem, 1.78rem + 4.13vw, 5.5rem);    /* 44 → 88 */
  --size-section:    clamp(2.125rem, 1.64rem + 2.07vw, 3.5rem);   /* 34 → 56 */
  --size-sub:        clamp(1.5rem, 1.32rem + 0.75vw, 2rem);       /* 24 → 32 */
  --size-standfirst: clamp(1.1875rem, 1.08rem + 0.47vw, 1.5rem);  /* 19 → 24 */
  --size-body:       clamp(1rem, 0.98rem + 0.09vw, 1.0625rem);    /* 16 → 17 */
  --size-eyebrow:    0.6875rem;                                    /* 11, не масштабируется */

  --lh-hero: 1.09;
  --lh-section: 1.11;
  --lh-sub: 1.25;
  --lh-standfirst: 1.5;
  --lh-body: 1.76;
  --lh-eyebrow: 1.2;

  --track-eyebrow: 0.22em;
  --track-button:  0.22em;
  --track-display: -0.01em;

  /* ─── Пространство ─── */
  --space-4: 4px;  --space-8: 8px;   --space-12: 12px; --space-16: 16px;
  --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px;
  --space-96: 96px; --space-160: 160px;
  --gutter: clamp(24px, 5vw, 64px);          /* мобайл 24 — из дока */
  --section-y: clamp(96px, 10vw, 160px);     /* мобайл не ниже 96 */
  --measure: 68ch;

  --radius: 0;                                /* квадрат везде, исключений нет */
  --tap-min: 48px;

  /* ─── Движение ─── */
  --dur-hero: 1200ms;
  --dur-section: 800ms;
  --dur-hover: 400ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ─── Тайп-стили ─── */
.pt-hero, .pt-section, .pt-sub {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--track-display);
  color: var(--ink);
  text-wrap: balance;
}
.pt-hero    { font-size: var(--size-hero);    line-height: var(--lh-hero); }
.pt-section { font-size: var(--size-section); line-height: var(--lh-section); }
.pt-sub     { font-size: var(--size-sub);     line-height: var(--lh-sub); }

.pt-standfirst {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--size-standfirst);
  line-height: var(--lh-standfirst);
  color: var(--ink-muted);
  max-width: 46ch;
}

.pt-body {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--ink);
  max-width: var(--measure);
}
.pt-body--muted { color: var(--ink-muted); }

.pt-eyebrow {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--size-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

/* ─── Кнопки ─── */
.pt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--space-16) 36px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--size-eyebrow);
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}
.pt-btn--primary   { background: var(--accent); color: var(--accent-ink); }
.pt-btn--primary:hover { background: var(--pt-oxblood-hover); }   /* без lift, тени, scale */
.pt-btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.pt-btn--secondary:hover { border-color: var(--ink); }
.pt-btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ─── Тёмная секция ─── */
.pt-dark {
  background: var(--surface-dark);
  --ink: var(--ink-on-dark);
  --ink-muted: var(--ink-muted-on-dark);
  --line: var(--line-on-dark);
  --line-strong: rgb(255 248 237 / 0.34);
  --accent: var(--accent-on-dark);
  --focus: var(--focus-on-dark);
  color: var(--ink);
}
.pt-dark .pt-btn--primary { background: var(--pt-oxblood); color: var(--pt-pearl); }

/* ─── Фокус ─── */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* ─── Движение ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}