/* =====================================================================
   Audiofill — дизайн-токени (єдине джерело значень)
   Опис і правила вживання: docs/02_design-system.md
   Жодних кольорів, розмірів чи тіней «від руки» в інших файлах —
   лише var(--…) звідси.
   ===================================================================== */

:root {
  /* ---------- 1. Фірмові кольори (палітра замовника) ---------- */
  --ink-900: #0d1016;        /* основа сторінки */
  --teal-900: #06222b;       /* глибокий бірюзовий: тоновані блоки, текст на м'яті */
  --cyan-500: #00c0ff;       /* інформація, посилання, фокус */
  --violet-600: #6c00ff;     /* лише всередині градієнта і як заливка */
  --mint-400: #23f1be;       /* ДІЯ: головні кнопки, вибране, ціна */
  --paper-100: #e9f3fd;      /* основний текст на темному, фон документів */

  /* ---------- 2. Додані відтінки (пропозиція до палітри) ---------- */
  --violet-400: #9a6bff;     /* фіолетовий для тексту/іконок на темному (#6c00ff нечитабельний) */
  --mint-300: #6ff6d4;       /* наведення на м'ятну кнопку */
  --cyan-300: #6fdcff;       /* наведення на посилання */
  --logo-ink: #051b22;       /* колір логотипа на світлому */
  --danger: #ff5470;
  --warning: #ffc857;

  /* ---------- 3. Поверхні (від темної до світлішої) ---------- */
  --bg-page: var(--ink-900);
  --bg-sunken: #090b10;                 /* підвал, «заглиблені» смуги */
  --bg-surface: #131821;                /* картка */
  --bg-raised: #1a212c;                 /* поле вводу, плитка, рядок таблиці при наведенні */
  --bg-hover: #222b38;
  --bg-tint: var(--teal-900);           /* акцентні секції */

  /* ---------- 4. Текст ---------- */
  --text-main: var(--paper-100);
  --text-secondary: #a9b9c9;
  --text-muted: #6f8194;
  --text-on-accent: var(--teal-900);    /* на м'яті та на градієнті — завжди темний */
  --text-on-stage: var(--logo-ink);

  /* ---------- 5. Лінії ---------- */
  --line: rgba(233, 243, 253, 0.10);
  --line-strong: rgba(233, 243, 253, 0.18);
  --line-accent: var(--mint-400);

  /* ---------- 6. Ролі акцентів ---------- */
  --action: var(--mint-400);
  --action-hover: var(--mint-300);
  --link: var(--cyan-500);
  --link-hover: var(--cyan-300);
  --focus-ring: 0 0 0 3px rgba(0, 192, 255, 0.45);
  --ai: var(--violet-400);              /* позначка «з використанням ШІ» */

  /* ---------- 7. Градієнт («сцена») ---------- */
  /* Зображення сцени (site/assets/img/bg-gradient.jpg) підключається в стилях компонента .stage,
     а не тут: відносна адреса у змінній рахується від сторінки, а не від цього файлу. */
  --stage-fallback: linear-gradient(118deg, #6c00ff 0%, #00c0ff 30%, #23f1be 58%, #e9f3fd 100%);
  --stage-line: linear-gradient(90deg, #6c00ff, #00c0ff 45%, #23f1be);  /* тонкі лінії, прогрес */

  /* ---------- 8. Скло (liquid glass) — лише для шарів, що «плавають» ---------- */
  /* Заломлення світла додає site/assets/js/core/glass.js; тут — основа і запасний варіант. */
  --glass-bg: rgba(19, 24, 33, 0.38);               /* скло над темним */
  --glass-bg-on-stage: rgba(255, 255, 255, 0.14);   /* скло над градієнтом */
  --glass-blur: blur(18px) saturate(165%);          /* там, де заломлення недоступне */
  /* Обідка немає. Замість неї — м'який відблиск, що згасає від лівого верхнього кута. */
  --glass-rim: linear-gradient(140deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.03) 28%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.08));
  --glass-rim-on-stage: linear-gradient(140deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.22));
  --glass-inner: inset 0 0 24px rgba(255, 255, 255, 0.035);
  --glass-solid-fallback: rgba(19, 24, 33, 0.94);   /* коли backdrop-filter недоступний */

  /* ---------- 9. Шрифти ---------- */
  --font-display: "Unbounded", "Onest", system-ui, sans-serif;  /* заголовки, ціни, номери */
  --font-text: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(2.5rem, 1.2rem + 5.2vw, 5.5rem);   /* 40 → 88 */
  --fs-h1: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);          /* 32 → 56 */
  --fs-h2: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);      /* 24 → 36 */
  --fs-h3: 1.25rem;                                      /* 20 */
  --fs-price: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);   /* 28 → 44 */
  --fs-lead: 1.1875rem;                                  /* 19 */
  --fs-body: 1rem;                                       /* 16 — мінімум для полів вводу */
  --fs-small: 0.875rem;                                  /* 14 */
  --fs-caption: 0.75rem;                                 /* 12 */

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.55;
  --track-display: -0.02em;
  --track-label: 0.08em;     /* для підписів-капітелей над заголовками */

  /* ---------- 10. Відступи (крок 4px) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --section-gap: clamp(64px, 9vw, 128px);

  /* ---------- 11. Сітка ---------- */
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --grid-gap: 24px;
  --header-h: 60px;          /* висота скляної шапки = висота логотипа поруч */

  /* ---------- 12. Заокруглення (від прямокутників логотипа) ---------- */
  --r-xs: 6px;      /* теги, смужки хвилі */
  --r-sm: 10px;     /* кнопки-іконки, малі поля */
  --r-md: 14px;     /* поля, кнопки, плитки */
  --r-lg: 20px;     /* картки */
  --r-xl: 28px;     /* «сцена», модальні вікна */
  --r-pill: 999px;  /* чипи-фільтри, перемикач мови */

  /* ---------- 13. Тіні ---------- */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-float: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-action: 0 8px 28px rgba(35, 241, 190, 0.28);

  /* ---------- 14. Рух ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);   /* легкий «відскок»: позначки, повзунок мови */
  --t-fast: 160ms;
  --t-base: 280ms;
  --t-slow: 720ms;

  /* ---------- 15. Шари ---------- */
  --z-header: 100;
  --z-dock: 200;      /* плеєр, плаваюча панель суми */
  --z-modal: 300;
  --z-toast: 400;

  /* ---------- 16. Документ (рахунок, PDF) — завжди світлий ---------- */
  --doc-paper: #ffffff;
  --doc-tint: #f1f7fd;
  --doc-ink: #051b22;
  --doc-muted: #5b6f7e;
  --doc-line: #d6e3ee;
  --doc-accent: #00a37a;   /* м'ята, затемнена для друку на білому */
}

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