/* ============================================================
   Nexpeco — design tokens
   Єдине джерело кольорів, радіусів, тіней і руху.
   Підключається ПЕРЕД css сторінки в кожному html.
   ============================================================ */

:root {
  /* --- Поверхні (від найтемнішої до найсвітлішої) --- */
  --bg: #0c0d0e;
  --surface: #121314;
  --surface-2: #1e1f21;
  --surface-3: rgba(41, 41, 41, 0.8);
  --surface-glass: rgba(41, 41, 41, 0.4);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* --- Текст: від найяскравішого до найтихішого --- */
  --text: #f4f5f5;
  --text-soft: #c0c0c0;
  --text-muted: #8a8a8a;
  --text-dim: rgba(243, 243, 243, 0.6);

  /* --- Акцент --- */
  --accent: #18d9a3;
  --accent-hover: #14c492;
  --accent-ink: #0a1813;          /* текст поверх акценту */
  --accent-soft: rgba(24, 217, 163, 0.12);
  --accent-glow: rgba(24, 217, 163, 0.45);

  /* Глибший відтінок акценту — логотип і активний пункт навігації. */
  --accent-deep: #0db999;
  --accent-deep-glow: rgba(13, 185, 153, 0.42);

  /* --- Стани --- */
  --danger: #e5484d;
  --danger-soft: rgba(229, 72, 77, 0.12);
  --success: #18d9a3;

  /* --- Скло --- */
  --glass: rgba(20, 20, 20, 0.88);
  --glass-blur: blur(20px);

  /* --- Радіуси --- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 32px;
  --r-pill: 900px;

  /* --- Тіні --- */
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 24px 36px rgba(0, 0, 0, 0.42);
  --shadow-accent: 0 12px 24px var(--accent-glow);

  /* --- Рух --- */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.25, 0.8, 0.25, 1);
  --ease-out-strong: cubic-bezier(0.22, 1, 0.36, 1);   /* різкий старт, довгий м'який хвіст */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);               /* для того, що зникає */
  /* Пружина з ледь помітним перельотом (~4%). Візуально «доїжджає» за ~половину тривалості. */
  --ease-spring: linear(0, 0.042, 0.143, 0.274, 0.414, 0.549, 0.67, 0.773, 0.857, 0.921, 0.968,
    1.001, 1.022, 1.033, 1.038, 1.038, 1.035, 1.031, 1.025, 1.02, 1.015, 1.011, 1.007, 1.004, 1);
  --t-fast: 0.18s;
  --t-base: 0.25s;
  --t-slow: 0.35s;
  --t-spring: 0.5s;
  --t-page: 0.28s;       /* перехід між вкладками */

  /*
    Готовий shorthand. Не `all`: `all` анімує й розкладку (width, padding, height…),
    а це перерахунок layout на кожному кадрі і ривки на слабких телефонах.
    Тут лише те, що малюється дешево.
  */
  --transition:
    color var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    opacity var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out);

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

  /* --- Розкладка --- */
  --nav-height: 5.5rem;   /* висота bottom-nav + відступ, для padding-bottom сторінок */
  --control-h: 2.75rem;   /* висота select/input у рядках фільтрів — щоб стояли рівно */
  --content-max: 820px;
}

/* Спільні скидання, які раніше дублювались у кожному css */
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

a,
button {
  font-family: inherit;
}

/*
  Атрибут hidden має ховати завжди. Без цього будь-який клас з display: grid/flex
  його перебиває — так модалка колись висіла прозорим шаром над сторінкою
  і з'їдала всі кліки.
*/
[hidden] {
  display: none !important;
}

/* --- Іконки -------------------------------------------------- */

/*
  Базовий примітив: `icon()` з utils.js віддає <svg class="ico"> на КОЖНІЙ сторінці,
  тож правило має жити тут. Поки воно лежало в shell.css, chat/auth/onboarding
  його не підключали — і svg без розмірів розгортався у 300×150 чорний квадрат.
*/
.ico {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ico-fill { fill: currentColor; stroke: none; }
.ico-accent { color: var(--accent); }

/* --- Поведінка на телефоні ----------------------------------- */

/*
  Три речі, через які сторінка поводилась як документ, а не як застосунок:
  гумове відтягування за край, підсвітка тапу і довгий тиск, що виділяв
  і «тягав» кнопки. Прибираємо всі три разом.
*/
html {
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

a,
button,
label,
img,
svg,
[role="button"] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;   /* довгий тиск не відкриває меню «зберегти» */
}

/* Швидкий тап без 300 мс очікування другого дотику (подвійний тап = зум). */
a,
button,
label,
select,
[role="button"] {
  touch-action: manipulation;
}

/* Текст, який людина справді копіює, лишається виділяльним. */
input,
textarea,
[contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

/*
  iOS наближає сторінку, щойно фокус потрапляє в поле з текстом дрібнішим
  за 16px — і після закриття клавіатури масштаб не повертається. Саме це
  виглядало як «вікно постійно міняє розмір». На тач-екранах піднімаємо
  всі поля до 16px; !important тут по ділу — правило мусить перебити
  точковіші селектори сторінок (.field-input, .setting-select тощо).
*/
@media (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}