/* ============================================================
   FURRIZO AI — DESIGN SYSTEM: VARIABLES
   Все CSS-переменные проекта. Импортируется первым.
   Изменение здесь автоматически применяется везде.
   ============================================================ */

:root {

  /* ── ФОНОВЫЕ ЦВЕТА ── */
  --bg-primary:      #080B14;
  --bg-secondary:    #0D1117;
  --bg-surface:      #111827;
  --bg-elevated:     #1A2235;
  --bg-hover:        #1E293B;

  /* ── GLASSMORPHISM ── */
  --glass-bg:        rgba(255, 255, 255, 0.04);
  --glass-bg-hover:  rgba(255, 255, 255, 0.07);
  --glass-border:    rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(0, 217, 255, 0.3);
  --glass-blur:      12px;
  --glass-blur-lg:   24px;

  /* ── АКЦЕНТНЫЕ ЦВЕТА ── */
  --accent-cyan:     #00D9FF;
  --accent-purple:   #7B2FBE;
  --accent-cyan-dim: rgba(0, 217, 255, 0.15);
  --accent-purple-dim: rgba(123, 47, 190, 0.15);

  /* ── ГРАДИЕНТЫ ── */
  --gradient-brand:  linear-gradient(135deg, #00D9FF 0%, #7B2FBE 100%);
  --gradient-brand-h: linear-gradient(90deg, #00D9FF 0%, #7B2FBE 100%);
  --gradient-card:   linear-gradient(135deg, rgba(0,217,255,0.08) 0%, rgba(123,47,190,0.08) 100%);
  --gradient-hero-bg: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,217,255,0.12) 0%, transparent 60%),
                      radial-gradient(ellipse 50% 40% at 80% 60%, rgba(123,47,190,0.10) 0%, transparent 60%);

  /* ── СВЕЧЕНИЯ (BOX-SHADOW) ── */
  --glow-cyan:       0 0 40px rgba(0, 217, 255, 0.20);
  --glow-cyan-sm:    0 0 20px rgba(0, 217, 255, 0.15);
  --glow-purple:     0 0 40px rgba(123, 47, 190, 0.20);
  --glow-card:       0 20px 60px rgba(0, 0, 0, 0.40);
  --glow-btn:        0 0 0 4px rgba(0,217,255,0.20), 0 0 30px rgba(0,217,255,0.25);

  /* ── ТЕКСТ ── */
  --text-primary:    #F0F4FF;
  --text-secondary:  #8B9CC8;
  --text-muted:      #4A5568;
  --text-accent:     #00D9FF;

  /* ── СТАТУСЫ ── */
  --success:         #00E5A0;
  --success-dim:     rgba(0, 229, 160, 0.15);
  --warning:         #FFB800;
  --warning-dim:     rgba(255, 184, 0, 0.15);
  --error:           #FF4B6B;
  --error-dim:       rgba(255, 75, 107, 0.15);

  /* ── ТИПОГРАФИКА ── */
  --font-sans:       'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:       'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Font sizes — fluid/clamp */
  --text-xs:         0.75rem;
  --text-sm:         0.875rem;
  --text-base:       1rem;
  --text-lg:         1.125rem;
  --text-xl:         1.25rem;
  --text-2xl:        1.5rem;
  --text-3xl:        1.875rem;
  --text-4xl:        2.25rem;
  --text-5xl:        3rem;
  --text-hero:       clamp(2.5rem, 6vw, 4.5rem);
  --text-display:    clamp(3rem, 8vw, 6rem);

  /* Font weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;

  /* ── SPACING (кратно 4px) ── */
  --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;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ── BORDER RADIUS ── */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* ── ПЕРЕХОДЫ ── */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  --ease-out:    cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── LAYOUT ── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1536px;

  --nav-height:     72px;
  --mobile-bar-h:   68px;

  /* ── Z-INDEX ── */
  --z-base:     0;
  --z-above:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
  --z-nav:      500;
}

/* ── Медиа-брейкпоинты (для использования в @media) ── */
/* xs: 375px | sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px */