/* ==========================================================================
   X SHOP — Design tokens
   Единственный источник значений цвета, типографики, отступов, радиусов,
   теней и анимаций. Компоненты используют только переменные отсюда.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---------- Brand palette ---------- */
  --c-bg: #080A10;            /* основной фон */
  --c-surface: #151A24;       /* поверхности: карточки, списки */
  --c-surface-2: #1B2130;     /* поднятые элементы: поля, сегменты */
  --c-surface-3: #252C3D;     /* hover / неактивные столбцы графика */
  --c-accent: #2877FA;        /* акцент */
  --c-accent-hover: #3D86FF;
  --c-accent-press: #1E66DF;
  --c-accent-soft: rgba(40, 119, 250, 0.14);
  --c-accent-line: rgba(40, 119, 250, 0.42);
  --c-on-accent: #FFFFFF;

  --c-text: #F5F7FC;          /* основной текст */
  --c-text-2: #A3ACBF;        /* вторичный текст */
  --c-text-3: #6B7488;        /* подписи, неактивное */
  --c-line: rgba(245, 247, 252, 0.07);
  --c-line-strong: rgba(245, 247, 252, 0.12);

  /* ---------- Semantic ---------- */
  --c-success: #2FBF71;
  --c-success-soft: rgba(47, 191, 113, 0.14);
  --c-warning: #F2A93B;
  --c-warning-soft: rgba(242, 169, 59, 0.14);
  --c-danger: #F0505A;
  --c-danger-soft: rgba(240, 80, 90, 0.14);
  --c-violet: #9B8AFB;
  --c-violet-soft: rgba(155, 138, 251, 0.14);
  --c-neutral-soft: rgba(245, 247, 252, 0.08);

  /* ---------- Glass ---------- */
  --glass-bg: rgba(21, 26, 36, 0.68);
  --glass-bg-strong: rgba(21, 26, 36, 0.86);
  --glass-border: rgba(245, 247, 252, 0.08);
  --glass-highlight: linear-gradient(180deg, rgba(245, 247, 252, 0.07), rgba(245, 247, 252, 0) 42%);
  --glass-blur: saturate(150%) blur(22px);

  /* ---------- Typography ---------- */
  --font-ui: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Unbounded", var(--font-ui);

  --fs-xs: 0.75rem;     /* 12 — подписи осей, бейджи */
  --fs-sm: 0.8125rem;   /* 13 — вторичный текст */
  --fs-md: 0.9375rem;   /* 15 — основной текст */
  --fs-lg: 1.0625rem;   /* 17 — заголовки строк, кнопки */
  --fs-xl: 1.25rem;     /* 20 — заголовки секций */
  --fs-2xl: 1.5rem;     /* 24 — заголовок экрана */
  --fs-3xl: 1.875rem;   /* 30 */
  --fs-hero: clamp(2rem, 9.5vw, 2.75rem); /* 32–44 — ключевая цифра */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.5;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;

  /* ---------- Spacing (4-pt grid) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;

  --gutter: 16px;              /* боковой отступ экрана на телефоне */
  --section-gap: var(--sp-8);  /* расстояние между секциями */

  /* ---------- Radii (по иерархии) ---------- */
  --r-xs: 8px;      /* бейджи, мелкие элементы */
  --r-sm: 12px;     /* поля, кнопки, плитки логотипов */
  --r-md: 16px;     /* строки-кнопки, сегменты */
  --r-lg: 22px;     /* группы списков, панели */
  --r-xl: 28px;     /* hero-панель, шторки */
  --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 0 rgba(245, 247, 252, 0.04) inset, 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 24px 64px -16px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--glass-border);
  --glow-accent: 0 0 0 1px var(--c-accent-line), 0 10px 30px -8px rgba(40, 119, 250, 0.55);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;

  /* ---------- Layout ---------- */
  --tap: 44px;                 /* минимальная зона нажатия */
  --nav-h: 64px;               /* нижняя навигация без safe-area */
  --sidebar-w: 248px;
  --content-max: 640px;        /* колонка на телефоне / планшете */
  --content-max-wide: 1180px;  /* desktop */

  /* Safe areas: iOS notch / Android cutout / Telegram fullscreen.
     Telegram (Bot API 8.0+) выставляет --tg-safe-area-inset-* и --tg-content-safe-area-inset-*. */
  --safe-top: max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ---------- Z-index ---------- */
  --z-nav: 20;
  --z-sheet: 40;
  --z-toast: 60;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --section-gap: var(--sp-10);
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
    --fs-hero: 3rem;
  }
}