/* ============================================================
   Kukurudza · H1 «Ціна як кваліфікатор» (v1_price_qualifier)
   Дизайн-токени — джерело: реальна тема kukurudza.com
   (targetologist.css / main.css). Зелена айдентика курсу
   + помаранчевий акцент на головних CTA. Mobile-first.
   ============================================================ */

/* ---------- Фірмові шрифти (self-host) ---------- */
@font-face {
  font-family: "KyivType Titling";
  src: url("../../public/fonts/KyivTypeTitling-Light3.woff2") format("woff2"),
       url("../../public/fonts/KyivTypeTitling-Light3.woff") format("woff");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Ermilov";
  src: url("../../public/fonts/ermilov-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Kukurudza";
  src: url("../../public/fonts/Kukurudza-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
/* "Commissioner" (текст) підключається через <link> Google Fonts у <head> */

:root {
  /* ---------- Палітра: зелена база (з targetologist.css) ---------- */
  --green-900: #001f3e;   /* темно-синій контраст (преміум-градієнт) */
  --green-800: #06774a;   /* PRIMARY — глибокий зелений */
  --green-700: #00804d;
  --green-500: #75d164;   /* яскравий зелений акцент */
  --green-400: #74c465;
  --green-100: #e2ffb9;   /* лаймовий tint — світлі секції */

  /* ---------- Помаранчевий акцент (з main.css, лише CTA) ---------- */
  --accent: #ff6b00;
  --accent-600: #e85f00;  /* hover */
  --accent-100: #ffdcbc;

  /* ---------- Нейтральні ---------- */
  --ink: #131313;         /* основний текст */
  --ink-2: #3f3f3f;       /* вторинний текст */
  --muted: #707070;       /* приглушений */
  --surface: #ffffff;
  --surface-2: #f7f7f7;   /* світло-сірі секції */
  --surface-3: #eef7e6;   /* ледь-зелений фон */
  --border: rgba(19, 19, 19, 0.12);
  --border-green: rgba(6, 119, 74, 0.18);

  /* ---------- Семантичні ---------- */
  --color-primary: var(--green-800);
  --color-on-primary: #ffffff;
  --color-cta: var(--accent);
  --color-on-cta: #ffffff;
  --color-bg: var(--surface);
  --color-fg: var(--ink);

  /* ---------- Фірмові градієнти (точно з теми) ---------- */
  --grad-green: linear-gradient(92.61deg, #06774a 0%, #75d164 102.44%);
  --grad-green-soft: linear-gradient(91.42deg, #e2ffb9 1.21%, #ffffff 100%);
  --grad-premium: linear-gradient(53.75deg, #001f3e -3.71%, #00804d 51.25%, #74c465 97.21%);
  --grad-cta: linear-gradient(95deg, #ff6b00 0%, #ff8a33 100%);

  /* ---------- Типографіка ---------- */
  --font-display: "Ermilov", "Commissioner", system-ui, sans-serif;
  --font-head: "Ermilov", "Commissioner", system-ui, sans-serif;
  --font-body: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brand: "Kukurudza", "Commissioner", sans-serif;

  /* fluid type scale (mobile-first, clamp) */
  --fs-display: clamp(2.4rem, 9vw, 6rem);   /* hero «таргетолог» — менший мін, щоб не обрізалось на мобільному */
  --fs-h1: clamp(2rem, 6.5vw, 3.5rem);
  --fs-h2: clamp(1.6rem, 5vw, 2.6rem);
  --fs-h3: clamp(1.2rem, 3.4vw, 1.6rem);
  --fs-lead: clamp(1.05rem, 2.4vw, 1.35rem);
  --fs-body: 1.0625rem;   /* 17px — ≥16 для mobile */
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  --lh-display: 0.98;
  --lh-head: 1.12;
  --lh-body: 1.6;

  /* ---------- Радіуси (бренд = pill + крупні картки) ---------- */
  --r-pill: 999px;
  --r-card: clamp(20px, 4vw, 32px);
  --r-md: 18px;
  --r-input: 16px;
  --r-sm: 12px;

  /* ---------- Тіні (зелені/помаранчеві glow) ---------- */
  --shadow-card: 0 14px 44px -16px rgba(6, 119, 74, 0.22);
  --shadow-card-hover: 0 22px 60px -18px rgba(6, 119, 74, 0.32);
  --shadow-cta: 0 12px 28px -8px rgba(255, 107, 0, 0.45);
  --shadow-soft: 0 8px 30px -12px rgba(19, 19, 19, 0.12);

  /* ---------- Простір / ритм (4-8 scale) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --section-y: clamp(3.5rem, 9vw, 7rem);
  --container: min(1180px, 92vw);
  --container-narrow: min(720px, 92vw);

  /* ---------- Рух ---------- */
  --t-fast: 0.15s;
  --t: 0.25s;
  --t-slow: 0.4s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Шари ---------- */
  --z-sticky: 60;
  --z-nav: 50;
  --z-overlay: 80;
  --z-modal: 100;
}

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