/* ==========================================================
   LM Бухгалтерські послуги — design tokens
   Джерело: Figma → колекції змінних Primitives і Semantic,
   текстові стилі Desktop/* і Mobile/*.
   У компонентах використовуйте лише Semantic-змінні.
   ========================================================== */

@font-face {
  font-family: "Onest";
  src: url("../fonts/Onest-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ---------- Primitives: колір ---------- */
  --color-red-50:  #FDECEC;
  --color-red-500: #E30613;
  --color-red-600: #D60511;
  --color-red-700: #C70511;
  --color-neutral-900: #1D1D1B;
  --color-neutral-700: #4A4A48;
  --color-neutral-600: #6B6B6A;
  --color-neutral-500: #868686;
  --color-neutral-450: #8C8A86;
  --color-neutral-400: #9D9D9C;
  --color-neutral-200: #E6E3DE;
  --color-neutral-100: #F7F5F2;
  --color-neutral-0:   #FFFFFF;
  --color-white-a12:   rgb(255 255 255 / 0.12);

  /* ---------- Semantic: колір ---------- */
  --text-primary:       var(--color-neutral-900);
  --text-secondary:     var(--color-neutral-700);
  --text-placeholder:   var(--color-neutral-600);
  --text-inverse:       var(--color-neutral-0);
  --text-accent:        var(--color-red-600);   /* дрібний червоний текст до 18px */
  --text-brand:         var(--color-red-500);   /* великий червоний текст від 18px */

  --bg-page:            var(--color-neutral-0);
  --bg-surface:         var(--color-neutral-100);
  --bg-dark:            var(--color-neutral-900);
  --bg-accent-subtle:   var(--color-red-50);    /* фон бейджа */
  --bg-control-on-dark: var(--color-white-a12); /* круглі кнопки перегляду сертифікатів */

  --action-primary:       var(--color-red-500);
  --action-primary-hover: var(--color-red-700);
  --action-disabled:      var(--color-neutral-200);

  --border-input:       var(--color-neutral-450);
  --border-focus:       var(--color-neutral-900);
  --border-error:       var(--color-red-600);
  --border-subtle:      var(--color-neutral-200);

  --decor-pattern:      var(--color-neutral-500);
  --decor-gray:         var(--color-neutral-400); /* не для тексту на білому */

  /* ---------- Відступи (крок 4px) ---------- */
  --space-4: 4px;   --space-8: 8px;   --space-12: 12px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px;
  --space-48: 48px; --space-64: 64px; --space-80: 80px; --space-120: 120px;

  --section-gap: var(--space-48);    /* мобайл */
  /* Поля сторінки до 1024px: 16px на телефонах, плавно до 32px (від 800px) —
     і без стрибка переходять у десктопні 32 → 120px (styles.css, @media 1024) */
  --page-margin: clamp(var(--space-16), 4vw, var(--space-32));
  --content-max: 1200px;

  /* ---------- Тіні ---------- */
  --shadow-sticky: 0 -4px 16px color-mix(in srgb, var(--color-neutral-900) 8%, transparent); /* Sticky CTA (mobile): тінь угору */
  --shadow-banner: 0 8px 32px color-mix(in srgb, var(--color-neutral-900) 14%, transparent); /* банер згоди на cookies */

  /* ---------- Радіуси ---------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* ---------- Типографіка ---------- */
  --font-brand: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Мобайл за замовчуванням (mobile-first) */
  --text-h1:      900 28px/1.2 var(--font-brand);
  --text-h2:      700 20px/1.3 var(--font-brand);
  --text-title:   700 18px/1.3 var(--font-brand);
  --text-subtitle: 400 18px/1.4 var(--font-brand);  /* Figma: Subtitle */
  --text-stat:    900 32px/1 var(--font-brand);
  --text-step-number: 700 32px/1 var(--font-brand);  /* Figma: Step number */
  --text-body-l:  400 16px/1.5 var(--font-brand);
  --text-body:    400 16px/1.5 var(--font-brand);
  --text-body-s:  400 14px/1.5 var(--font-brand);
  --text-caption: 400 12px/1.5 var(--font-brand);
  --text-button:  700 16px/1 var(--font-brand);
  --text-button-s: 700 14px/1 var(--font-brand);  /* Figma: Mobile/Button S */

  /* ---------- Анімація ---------- */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-hover: 200ms;
  --duration-reveal: 1000ms;
  --duration-counter: 1600ms;
  --stagger: 120ms;
  /* Hero при завантаженні — один таймлайн (текст з --ease-out-soft, фото — з власною кривою):
     фото 0 → рядки H1 150 і 300 → опис 600 → кнопка 800 → статистика й лічильник 1000 мс */
  --duration-hero-text: 900ms;      /* рядок заголовка виїжджає з-під маски */
  --duration-hero-fade: 700ms;      /* опис, кнопка, статистика: fade-up */
  --duration-hero-counter: 1800ms;  /* лічильник у Hero */
  --hero-stagger: 200ms;            /* крок таймлайну: затримки рахуються від нього */
  --hero-photo-tail: 600ms;         /* на скільки фото доїжджає після зупинки лічильника */
  /* Фото: масштаб 1.06 → 1. Триває до кінця лічильника (старт на 5-му кроці
     + тривалість) і ще трохи після — підлаштовується само, якщо змінити лічильник */
  --duration-hero-photo: calc(5 * var(--hero-stagger) + var(--duration-hero-counter) + var(--hero-photo-tail));
  --ease-hero-photo: cubic-bezier(0.25, 0.1, 0.25, 1); /* рівномірне наближення до самого кінця */
  --duration-pattern: 90s;          /* патерн-смуга: один повний цикл руху */
  --reveal-distance: 64px;
  --hero-reveal-distance: 24px;     /* fade-up у Hero лишається коротким */
}

/* Планшет, лише для Hero (768–1023px): розміри плавно між мобайлом і десктопом */
@media (min-width: 768px) and (max-width: 1023.98px) {
  :root {
    --text-h1:        900 clamp(36px, 4.7vw, 44px)/1.2 var(--font-brand);   /* 28 → 48 */
    --text-stat:      900 clamp(36px, 4.4vw, 44px)/1 var(--font-brand);     /* 32 → 48 */
    --text-hero-lead: 400 clamp(16px, 1.9vw, 18px)/1.5 var(--font-brand);   /* 14 → 20 */
  }
}

/* Десктоп */
@media (min-width: 1024px) {
  :root {
    --section-gap: var(--space-80);
    --page-margin: var(--space-120);

    --text-h1:      900 48px/1.2 var(--font-brand);
    --text-h2:      700 32px/1.3 var(--font-brand);
    --text-h3:      700 20px/1.3 var(--font-brand);
    --text-stat:    900 48px/1 var(--font-brand);
    --text-step-number: 700 40px/1 var(--font-brand);
    --text-body-l:  400 20px/1.5 var(--font-brand);
  }
}

/* Повага до налаштувань системи */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-hover: 0ms;
    --duration-reveal: 0ms;
    --duration-counter: 0ms;
    --stagger: 0ms;
    --duration-hero-text: 0ms;
    --duration-hero-fade: 0ms;
    --duration-hero-counter: 0ms;
    --hero-stagger: 0ms;
    --hero-photo-tail: 0ms;
    --duration-pattern: 0s;
    --reveal-distance: 0px;
    --hero-reveal-distance: 0px;
  }
}