/* ============================================================
   werty :: design tokens (cosmic theme)
   Все цвета, шрифты, отступы, радиусы — только тут.
   ============================================================ */

:root {
  /* ── Цветовая палитра ─────────────────────────────────── */
  --bg:           #07091a;
  --bg-grad:      radial-gradient(ellipse at 20% 0%, #1a1d4a 0%, #07091a 55%);
  --surface:      #0e1230;
  --surface-2:    #161a3d;
  --surface-3:    #1d2350;

  --ink:          #e7eaff;
  --ink-dim:      #c2c8f0;
  --muted:        #8b91c8;
  --muted-dim:    #5b608f;

  --line:         rgba(135, 140, 200, .16);
  --line-strong:  rgba(135, 140, 200, .32);

  /* акценты */
  --p1:           #7c6bff;            /* indigo */
  --p1-rgb:       124, 107, 255;
  --p1-dim:       #5847d4;
  --p2:           #2dd4ff;            /* cyan */
  --p2-rgb:       45, 212, 255;
  --p2-dim:       #1ba6cb;

  /* семантика */
  --danger:       #ff5e7a;
  --danger-rgb:   255, 94, 122;
  --success:      #34e0a1;
  --success-rgb:  52, 224, 161;
  --gold:         #ffce5d;
  --gold-rgb:     255, 206, 93;
  --warn:         #ffa64d;

  /* ── Типографика ───────────────────────────────────────── */
  --font-sans:    "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "Menlo", "Consolas", monospace;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;

  --fs-xs:    11px;
  --fs-sm:    13px;
  --fs-md:    15px;
  --fs-lg:    18px;
  --fs-xl:    22px;
  --fs-2xl:   28px;
  --fs-3xl:   36px;
  --fs-4xl:   48px;

  /* ── Скругления ────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ── Отступы ───────────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 72px;

  /* ── Тени ──────────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .25);
  --shadow:    0 12px 32px -12px rgba(0, 0, 0, .45);
  --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, .55);
  --glow-p1:   0 0 24px rgba(var(--p1-rgb), .45);
  --glow-p2:   0 0 24px rgba(var(--p2-rgb), .45);

  /* ── Прочее ────────────────────────────────────────────── */
  --nav-w:     260px;
  --topbar-h:  64px;
  --max-w:     1400px;
  --ease:      cubic-bezier(.4, 0, .2, 1);
}