/* Hallmark · macrostructure: Marquee Hero · tone: editorial · anchor hue: clay-warm
 * theme: custom (vibe: "тихая уверенность, editorial, живое присутствие" · paper oklch(95% 0.012 85) · accent oklch(48% 0.14 35) warm · Playfair Display + Inter)
 * genre: editorial · nav: N5 floating-pill · footer: Ft5 statement
 */

:root {
  /* ── Colour ── */
  --color-paper:        oklch(95% 0.012 85);
  --color-paper-alt:    oklch(97% 0.006 85);
  --color-paper-deep:   oklch(91% 0.022 75);
  --color-white:        oklch(100% 0 0);
  --color-ink:          oklch(14% 0.025 240);
  --color-ink-60:       oklch(14% 0.025 240 / 0.60);
  --color-ink-40:       oklch(14% 0.025 240 / 0.40);
  --color-ink-20:       oklch(14% 0.025 240 / 0.20);
  --color-ink-08:       oklch(14% 0.025 240 / 0.08);
  --color-green:        oklch(26% 0.06 165);
  --color-green-light:  oklch(26% 0.06 165 / 0.08);
  --color-clay:         oklch(48% 0.14 35);
  --color-clay-light:   oklch(48% 0.14 35 / 0.10);
  --color-focus:        oklch(55% 0.18 250);
  --color-ink-dark:     oklch(20% 0.025 240);
  --color-error:        oklch(55% 0.18 25);
  --color-error-light:  oklch(55% 0.18 25 / 0.10);

  /* ── Typography ── */
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'Inter', system-ui, sans-serif;

  /* ── Type scale ── */
  --text-display:    clamp(52px, 8vw, 108px);
  --text-display-s:  clamp(36px, 5.5vw, 72px);
  --text-h2:         clamp(28px, 4vw, 52px);
  --text-h3:         clamp(20px, 2.5vw, 30px);
  --text-lead:       clamp(16px, 1.6vw, 20px);
  --text-body:       clamp(14px, 1.2vw, 17px);
  --text-small:      13px;
  --text-label:      11px;

  /* ── Spacing (4pt scale) ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
  --space-40:  160px;

  /* ── Easing ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  /* ── Duration ── */
  --dur-fast:   150ms;
  --dur-base:   280ms;
  --dur-slow:   600ms;
  --dur-reveal: 700ms;

  /* ── Border radius ── */
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-card:  16px;
  --radius-modal: 20px;
  --radius-pill:  999px;

  /* ── Rule ── */
  --rule-thin:  1px solid var(--color-ink-08);
  --rule-mid:   1px solid var(--color-ink-20);
}

/* ── Cormorant Garamond: lining figures ── */
*:is(h1,h2,h3,h4,h5,h6,[class*="__title"],[class*="__heading"],[class*="__name"],[class*="__num"],[class*="__counter"]) {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* ══ Глобальные утилиты ══ */

/* Section label — /запросы, /цены и т.д. */
.u-label {
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-clay);
}

/* Section heading — h2 с display-шрифтом */
.u-heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

/* Section sub — подзаголовок под heading */
.u-sub {
  font-size: var(--text-lead);
  color: var(--color-ink-60);
  line-height: 1.6;
}