/*
 * DesignDNA · JATAPP · https://jatapp.com/
 * Дизайн-токени (CSS-змінні). Згенеровано автоматично — підключайте перед components.css.
 */

:root {
  color-scheme: light;

  /* Кольори: ролі */
  --ds-bg: #ffffff;
  --ds-surface: #f7f7f7;
  --ds-text: #444444;
  --ds-text-muted: #808080;
  --ds-primary: #fe5011;
  --ds-on-primary: #ffffff;
  --ds-secondary: #444444;
  --ds-accent: #fe5011;
  --ds-border: #e6e6e6;
  --ds-success: #16a34a;
  --ds-warning: #d97706;
  --ds-danger: #fe5011;

  /* Кольори: допоміжні */
  --ds-heading: #0f0f0f;
  --ds-on-secondary: #ffffff;
  --ds-on-accent: #000000;
  --ds-border-strong: #b2b2b2;
  --ds-primary-hover: #dd440d;
  --ds-secondary-hover: #5b5b5b;

  /* Кольори: шкали */
  --ds-primary-50: #fff2ef;
  --ds-primary-100: #ffe5dd;
  --ds-primary-200: #ffd0c3;
  --ds-primary-300: #ffb29c;
  --ds-primary-400: #ff8461;
  --ds-primary-500: #fe5011;
  --ds-primary-600: #d43d00;
  --ds-primary-700: #b03100;
  --ds-primary-800: #8e2600;
  --ds-primary-900: #731d00;
  --ds-primary-950: #4d1000;
  --ds-neutral-50: #fafafa;
  --ds-neutral-100: #f4f4f4;
  --ds-neutral-200: #e5e5e5;
  --ds-neutral-300: #d4d4d4;
  --ds-neutral-400: #a1a1a1;
  --ds-neutral-500: #737373;
  --ds-neutral-600: #525252;
  --ds-neutral-700: #404040;
  --ds-neutral-800: #262626;
  --ds-neutral-900: #171717;
  --ds-neutral-950: #0a0a0a;

  /* Кольори: палітра сайту */
  --ds-color-background: #ffffff;
  --ds-color-surface: #f7f7f7;
  --ds-color-text: #444444;
  --ds-color-text-muted: #808080;
  --ds-color-primary: #fe5011;
  --ds-color-gray-950: #0f0f0f;
  --ds-color-black: #000000;
  --ds-color-gray-100: #ededed;
  --ds-color-gray-400: #a8a8a8;
  --ds-color-white-a80: rgba(255, 255, 255, 0.8);
  --ds-color-gray-900: #1b1b1b;
  --ds-color-gray-800: #222222;

  /* Градієнти */
  --ds-gradient-1: linear-gradient(rgba(15, 15, 15, 0) 50%, rgba(15, 15, 15, 0.6) 100%);
  --ds-gradient-2: linear-gradient(rgb(247, 247, 247) 0%, rgb(255, 255, 255) 100%);
  --ds-gradient-3: linear-gradient(rgba(52, 34, 79, 0) 49%, rgb(52, 34, 79) 100%);
  --ds-gradient-4: linear-gradient(rgb(251, 251, 252) 0%, rgb(218, 218, 228) 100%);
  --ds-gradient-5: linear-gradient(rgb(13, 13, 18) 0%, rgb(87, 87, 120) 100%);
  --ds-gradient-6: linear-gradient(286deg, rgb(36, 25, 20) 0%, rgb(28, 28, 28) 100%);

  /* Шрифти */
  --ds-font-heading: "Inter Display", "Inter Display Placeholder", sans-serif;
  --ds-font-body: "Inter", "Inter Placeholder", sans-serif;
  --ds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Типографіка: розмір / вага / інтерліньяж / трекінг */
  --ds-text-display-size: 92px;
  --ds-text-display-weight: 500;
  --ds-text-display-line: 0.8;
  --ds-text-display-tracking: -0.05em;
  --ds-text-h1-size: 56px;
  --ds-text-h1-weight: 400;
  --ds-text-h1-line: 1.14;
  --ds-text-h1-tracking: -0.018em;
  --ds-text-h2-size: 32px;
  --ds-text-h2-weight: 400;
  --ds-text-h2-line: 1.19;
  --ds-text-h2-tracking: -0.02em;
  --ds-text-h3-size: 24px;
  --ds-text-h3-weight: 400;
  --ds-text-h3-line: 1.33;
  --ds-text-h3-tracking: -0.042em;
  --ds-text-h4-size: 22px;
  --ds-text-h4-weight: 600;
  --ds-text-h4-line: 1.36;
  --ds-text-h4-tracking: -0.012em;
  --ds-text-h5-size: 20px;
  --ds-text-h5-weight: 400;
  --ds-text-h5-line: 1.3;
  --ds-text-h5-tracking: 0em;
  --ds-text-h6-size: 18px;
  --ds-text-h6-weight: 400;
  --ds-text-h6-line: 1.3;
  --ds-text-h6-tracking: 0em;
  --ds-text-body-lg-size: 20px;
  --ds-text-body-lg-weight: 400;
  --ds-text-body-lg-line: 1.61;
  --ds-text-body-lg-tracking: 0em;
  --ds-text-body-size: 18px;
  --ds-text-body-weight: 400;
  --ds-text-body-line: 1.56;
  --ds-text-body-tracking: -0.024em;
  --ds-text-body-sm-size: 16px;
  --ds-text-body-sm-weight: 400;
  --ds-text-body-sm-line: 1.25;
  --ds-text-body-sm-tracking: -0.019em;
  --ds-text-caption-size: 14px;
  --ds-text-caption-weight: 400;
  --ds-text-caption-line: 1.4;
  --ds-text-caption-tracking: 0.01em;
  --ds-text-overline-size: 14px;
  --ds-text-overline-weight: 600;
  --ds-text-overline-line: 1.3;
  --ds-text-overline-tracking: 0.08em;
  --ds-text-label-size: 16px;
  --ds-text-label-weight: 500;
  --ds-text-label-line: 1.4;
  --ds-text-label-tracking: 0em;

  /* Відступи */
  --ds-space-1: 4px;
  --ds-space-2: 6px;
  --ds-space-3: 8px;
  --ds-space-4: 10px;
  --ds-space-5: 12px;
  --ds-space-6: 16px;
  --ds-space-7: 20px;
  --ds-space-8: 24px;
  --ds-space-9: 32px;
  --ds-space-10: 40px;
  --ds-space-11: 48px;
  --ds-space-12: 52px;
  --ds-space-13: 80px;
  --ds-space-14: 120px;
  --ds-space-section: 120px;
  --ds-gap-sm: var(--ds-space-3);
  --ds-gap: var(--ds-space-6);
  --ds-gap-lg: var(--ds-space-9);
  --ds-gap-xl: var(--ds-space-11);

  /* Радіуси */
  --ds-radius-sm: 3px;
  --ds-radius-md: 5px;
  --ds-radius-lg: 10px;
  --ds-radius-xl: 20px;
  --ds-radius-2xl: 24px;
  --ds-radius-full: 9999px;

  /* Тіні */
  --ds-shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.06), 0 1px 3px rgba(10, 10, 10, 0.1);
  --ds-shadow-md: 0 4px 12px -2px rgba(10, 10, 10, 0.12), 0 2px 4px -2px rgba(10, 10, 10, 0.08);
  --ds-shadow-lg: 0 16px 32px -8px rgba(10, 10, 10, 0.18), 0 6px 12px -6px rgba(10, 10, 10, 0.1);

  /* Межі */
  --ds-border-width: 1px;

  /* Макет: контейнер сходинками (див. layout.css) */
  --container-sm: 540px;   /* екран ≥576px  */
  --container-md: 768px;   /* екран ≥800px  */
  --container-lg: 992px;   /* екран ≥1024px */
  --container-xl: 1240px;  /* екран ≥1280px */
  --container-gutter: 16px;
  --ds-gutter: var(--container-gutter);

  /* Відступи секцій: однакові зверху й знизу, тому видалення секції не ламає ритм */
  --section-space: clamp(72px, 48px + 5vw, 120px);
  --section-head-space: clamp(32px, 24px + 2vw, 56px); /* від заголовка секції до її контенту */
  --stack-space: var(--ds-space-8);                     /* між бейджем, заголовком і текстом */

  /* Заголовки: розмір залежить лише від тегу */
  --h1-size: clamp(36px, 25.6px + 2.8vw, 64px);
  --h1-weight: 500;
  --h1-line: 1.05;
  --h1-tracking: -0.05em;
  --h2-size: clamp(32px, 22px + 2.4vw, 56px);
  --h2-weight: 400;
  --h2-line: 1.1;
  --h2-tracking: -0.03em;
  --h3-size: clamp(20px, 18.5px + 0.4vw, 24px);
  --h3-weight: 500;
  --h3-line: 1.25;
  --h3-tracking: -0.01em;
  --h4-size: 18px;
  --h4-weight: 500;
  --h4-line: 1.35;
  --h4-tracking: 0em;

  /* Кнопки */
  --btn-height: 56px;
  --btn-padding-x: 28px;
  --btn-font-size: var(--ds-text-body-size);
  --btn-font-weight: 600;
  --btn-radius: var(--ds-radius-full);
  --btn-icon-size: 42px;
  --btn-accent-bg: var(--ds-primary);
  --btn-accent-bg-hover: var(--ds-primary-hover);
  --btn-accent-text: var(--ds-on-primary);
  --btn-dark-bg: var(--ds-color-gray-950, #0f0f0f);
  --btn-dark-bg-hover: #2b2b2b;
  --btn-dark-text: #ffffff;

  /* Картки */
  --card-padding: clamp(24px, 20px + 1vw, 32px);
  --card-radius: var(--ds-radius-xl);

  /* Анімація */
  --ds-duration-fast: 150ms;
  --ds-duration-normal: 250ms;
  --ds-duration-slow: 400ms;
  --ds-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Брейкпоінти (довідково: CSS-змінні не працюють у @media).
     У медіазапитах використовуємо лише ці значення: 576px, 800px, 1024px, 1280px */
}

/* Мобільні значення (до 767px) */
@media (max-width: 767px) {
  :root {
    --ds-text-display-size: 28px;
    --ds-text-display-line: 1.14;
    --ds-text-h1-size: 28px;
    --ds-text-h1-line: 1.14;
    --ds-text-h2-size: 32px;
    --ds-text-h2-line: 1.13;
    --ds-text-h4-size: 14px;
    --ds-text-h4-line: 1.57;
    --ds-text-body-sm-size: 14px;
    --ds-text-body-sm-line: 1.57;
    --ds-space-section: 72px;
    --ds-gutter: 16px;
  }
}