/* ==========================================================================
   CodeMist — Design Tokens
   Тема: мистический зелёный "туман" + дев-команда/кодинг.
   Один accent-триплет в RGB, чтобы легко штамповать любые прозрачности:
   rgba(var(--c-accent-rgb), .08) ... rgba(var(--c-accent-rgb), .9)
   ========================================================================== */

:root {
  /* ---- базовые "тёмный туман" фоны ---- */
  --c-void: #050a08;         /* самый глубокий фон */
  --c-bg: #0a120e;           /* основной фон страницы */
  --c-panel: #0e1a15;        /* фон карточек/панелей */
  --c-panel-2: #12211a;      /* чуть светлее панель (hover/вложенные блоки) */
  --c-border: rgba(120, 255, 190, .14);
  --c-border-strong: rgba(120, 255, 190, .32);

  /* ---- accent: мистический зелёный (RGB-триплеты для альфа-вариаций) ---- */
  --c-accent-rgb: 94, 230, 166;      /* #5EE6A6 — основной "призрачный" зелёный */
  --c-accent-2-rgb: 47, 163, 122;    /* #2FA37A — глубокий зелёный */
  --c-accent-3-rgb: 166, 255, 173;   /* #A6FFAD — светлый мятный блик */
  --c-toxic-rgb: 168, 255, 90;       /* #A8FF5A — кислотный, только для акцентов/админки */
  --c-danger-rgb: 255, 107, 107;     /* danger-состояния */

  --c-accent: rgb(var(--c-accent-rgb));
  --c-accent-2: rgb(var(--c-accent-2-rgb));
  --c-accent-3: rgb(var(--c-accent-3-rgb));
  --c-toxic: rgb(var(--c-toxic-rgb));
  --c-danger: rgb(var(--c-danger-rgb));

  /* ---- текст ---- */
  --c-text: #dff5ea;
  --c-text-dim: rgba(223, 245, 234, .62);
  --c-text-faint: rgba(223, 245, 234, .38);

  /* ---- типографика ---- */
  --f-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --f-body: 'Inter', 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', 'Consolas', monospace;

  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.875rem;
  --fs-2xl: 2.5rem;
  --fs-3xl: 3.25rem;

  /* ---- отступы (единая шкала — важно для консистентных gap/padding) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ---- геометрия ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---- тень/свечение ---- */
  --glow-sm: 0 0 16px rgba(var(--c-accent-rgb), .18);
  --glow-md: 0 0 32px rgba(var(--c-accent-rgb), .22);
  --shadow-panel: 0 12px 40px rgba(0, 0, 0, .45);

  /* ---- слои ---- */
  --z-smoke: 0;
  --z-content: 10;
  --z-header: 500;
  --z-bottom-nav: 600;
  --z-sheet: 700;
  --z-toast: 900;

  /* ---- геометрия шапки/нижнего меню — используются в JS для расчётов ---- */
  --header-h: 64px;
  --bottom-nav-h: 72px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---- переходы ---- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: .15s;
  --dur-base: .25s;
  --dur-slow: .6s;

  color-scheme: dark;
}