/* tokens.css — design tokens (palette, typography, spacing) as CSS variables.
   Single source of truth: never hardcode colors/sizes in other stylesheets. */

:root {
  /* Палитра — обновлена по макету Figma (GT_Claude): indigo-чёрная база,
     зелёный акцент + сине-фиолетовый промо-градиент. */
  --color-bg-primary: #171727;      /* основной фон контента */
  --color-bg-secondary: #1D1D2F;    /* топбар, сайдбар, карточки, панели */
  --color-bg-tertiary: #212136;     /* инпуты, вложенные плашки */
  --color-bg-elevated: #26263D;     /* модалки, дропдауны, бейджи, аватар */
  --color-bg-deep: #14141F;         /* самый глубокий слой (колодцы, трек-скролл) */
  --color-border: #363653;
  --color-border-hover: #3E3E51;

  --color-text-primary: #FFFFFF;
  --color-text-secondary: #9A9AB0;
  --color-text-tertiary: #6E6E86;

  --color-accent: #18E77C;          /* фирменный зелёный из макета */
  --color-accent-hover: #00C957;    /* чуть ярче для не-кнопочных hover */
  --color-accent-bright: #18E77C;   /* верх градиента + primary hover */
  --color-accent-deep: #00964A;     /* низ градиента (глубина) */
  --color-accent-glow: rgba(24, 231, 124, 0.16);
  --color-accent-glow-strong: rgba(24, 231, 124, 0.32); /* нежный glow на hover кнопок */

  /* Промо-градиент баннеров (синий → фиолетовый) — новый в макете */
  --color-banner-from: #305EEB;     /* синий */
  --color-banner-to: #8B38F5;       /* фиолетовый */
  --color-violet: #8B38F5;
  --color-blue: #305EEB;

  --color-success: #18E77C;
  --color-warning: #F7931A;
  --color-warning-glow: rgba(247, 147, 26, 0.40);
  --color-on-warning: #2A1500;      /* тёмный текст на оранжевом */
  --color-danger: #FF4757;          /* destructive button red */
  --color-danger-glow: rgba(255, 71, 87, 0.40);
  --color-info: #4080EF;

  /* Premium / VIP gold (linear-gradient endpoints + glow) */
  --color-gold: #FFD700;
  --color-gold-2: #FFA500;
  --color-gold-glow: rgba(255, 184, 0, 0.45);

  /* Контрастный цвет текста на акцентных/опасных заливках */
  --color-on-accent: #FFFFFF;       /* белый текст на зелёном — premium-стиль */
  --color-on-danger: #FFFFFF;

  /* Button system */
  --btn-h-lg: 52px;                 /* hero / primary CTAs */
  --btn-h-md: 44px;                 /* default / interface standard */
  --btn-h-sm: 36px;                 /* compact / technical (filter, sort, quick) */
  --btn-radius: 10px;               /* фиксированное скругление 10px (по макету) */
  --btn-radius-technical: 10px;     /* единый радиус для малых/технических кнопок */
  --btn-secondary-text: rgba(255, 255, 255, 0.70);    /* not pure white — softer */
  --btn-secondary-border: rgba(255, 255, 255, 0.08);  /* barely-there outline */
  --btn-secondary-border-hover: rgba(255, 255, 255, 0.16);
  --btn-secondary-hover-bg: rgba(255, 255, 255, 0.04);
  --btn-ghost-hover-bg: rgba(255, 255, 255, 0.04);
  --shadow-btn: 0 4px 12px rgba(14, 14, 20, 0.30);    /* soft depth under filled buttons */

  /* Типографика — Proxima Nova (по макету). Свободного веб-аналога нет,
     поэтому ближайший fallback — Montserrat (грузится с Google Fonts).
     На системах с лицензией Proxima Nova подхватится она. */
  --font-ui: 'Proxima Nova', 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-display: 'Proxima Nova', 'Montserrat', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;  /* для балансов и сумм (табличные цифры) */

  /* Размеры шрифтов — по макету ступени 16 / 20 / 24 / 34.
     16px — минимум и default (НЕ опускаем ниже 16 на инпутах — иначе iOS зумит
     при фокусе). Крупные ступени fluid через clamp(): плавно ужимаются на узких
     экранах без лесенки media-queries. Десктоп получает прежние максимумы. */
  --text-xs: 16px;   /* минимум — не fluid (iOS no-zoom) */
  --text-sm: 16px;
  --text-base: 16px; /* default */
  --text-lg: clamp(18px, 2.4vw, 20px);
  --text-xl: clamp(20px, 3vw, 24px);
  --text-2xl: clamp(20px, 3.4vw, 24px);
  --text-3xl: clamp(25px, 4.2vw, 34px);  /* баннер / hero — fluid */

  /* Спейсинг (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;

  /* Радиусы — фиксированные по макету: 10px (мелкие/средние) и 20px (крупные).
     --radius-full сохранён для истинно круглых элементов (точки, аватары, пиллы-индикаторы). */
  --radius-sm: 10px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* Тени */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 24px var(--color-accent-glow);
  --shadow-banner: 0 12px 32px rgba(48, 94, 235, 0.28);  /* мягкая тень под промо-баннером */

  /* Анимации */
  --transition-fast: 120ms cubic-bezier(0.2, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.2, 0, 0.2, 1);
  --transition-slow: 320ms cubic-bezier(0.2, 0, 0.2, 1);

  /* Layout-метрики (используются в layout.css) */
  --topbar-height: 64px;
  --sidebar-width: 276px;
  --sidebar-width-collapsed: 72px;
  --bottomnav-height: 64px;
  --content-max-width: 1440px;

  /* Mobile / touch (M0). safe-area-inset — отступы под нотч/home-indicator iOS
     (нужен viewport-fit=cover в <meta>). --tap-min — минимальный тач-таргет. */
  --tap-min: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --drawer-width: min(86vw, 320px);
  --sheet-max-h: 80vh;
  --z-overlay: 900;   /* backdrop */
  --z-drawer: 1000;   /* off-canvas сайдбар */
  --z-sheet: 1000;    /* bottom-sheet «Ещё» */

  /* Брейкпоинты документируем здесь для справки (CSS их напрямую не читает):
     mobile <768px, tablet 768-1024px, desktop 1024px+ */
}