:root {
  /* === Цвета === */
  --color-bg:           #0a0a0f;
  --color-surface:      #111118;
  --color-surface-2:    #161620;
  --color-border:       #1e1e2e;
  --color-border-hover: #2e2e4e;

  --color-accent:       #00e5a0;
  --color-accent-dim:   #00b87a;
  --color-accent-glow:  rgba(0, 229, 160, 0.15);
  --color-blue:         #00b8ff;
  --color-blue-glow:    rgba(0, 184, 255, 0.12);
  --color-warn:         #ff6b35;
  --color-error:        #ff4455;
  --color-success:      #00e5a0;

  --color-text:         #e8e8f0;
  --color-text-2:       #9898b0;
  --color-text-muted:   #555570;
  --color-text-inverse: #0a0a0f;

  /* === Типографика === */
  --font-sans:   'Syne', system-ui, sans-serif;
  --font-mono:   'Space Mono', 'Courier New', monospace;

  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    28px;
  --text-2xl:   36px;
  --text-3xl:   48px;

  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.2em;

  /* === Отступы === */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* === Радиусы === */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* === Тени === */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.6);
  --shadow-accent: 0 0 20px var(--color-accent-glow);
  --shadow-blue:   0 0 20px var(--color-blue-glow);

  /* === Переходы === */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;
  --transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Z-индексы === */
  --z-base:    1;
  --z-dropdown: 10;
  --z-overlay: 50;
  --z-toast:   100;

  /* === Breakpoints (только для документации — использовать в media queries) ===
     --bp-sm:  480px
     --bp-md:  768px
     --bp-lg:  1024px
     --bp-xl:  1280px
  */

  /* === Размеры компонентов === */
  --header-height:        60px;
  --header-height-mobile: 52px;
  --content-max-width:    920px;
  --card-min-width:       280px;
}