/* ============================================
   Design tokens — qwerty.studio
   ============================================ */

:root {
  /* ---- Colors ---- */
  --bg:           #0a0e0a;
  --bg-elev:      #0f1510;
  --bg-elev-2:    #141a14;
  --bg-overlay:   rgba(10, 14, 10, 0.85);

  /* Глобальный радиальный «свет ЭЛТ» поверх --bg.
     Меняем здесь — крутится и интенсивность, и положение пятна. */
  --bg-radial:
    radial-gradient(ellipse 75% 55% at 22% -5%,
                    rgba(0, 255, 65, 0.07),
                    transparent 65%),
    radial-gradient(ellipse 60% 45% at 90% 110%,
                    rgba(0, 255, 65, 0.035),
                    transparent 60%);

  --border:       #1f2a1f;
  --border-bright:#2a3a2a;
  --border-accent:rgba(0, 255, 65, 0.3);

  --fg:           #c9d1c9;
  --fg-bright:    #e6ede6;
  --fg-dim:       #8a958a;
  --fg-muted:     #4a5a4a;

  --accent:       #00ff41;
  --accent-dim:   #00b82e;
  --accent-soft:  #66ff8c;
  --accent-glow:  rgba(0, 255, 65, 0.45);
  --accent-bg:    rgba(0, 255, 65, 0.08);

  --danger:       #ff5555;
  --warning:      #f1fa8c;
  --info:         #8be9fd;

  /* ---- Typography ---- */
  --font-mono:    'Fira Code', 'JetBrains Mono', ui-monospace, 'SF Mono',
                  'Courier New', monospace;

  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-lg:    1.125rem;
  --fs-xl:    1.375rem;
  --fs-2xl:   1.875rem;
  --fs-3xl:   2.5rem;
  --fs-4xl:   3.5rem;
  --fs-5xl:   4.5rem;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.6;

  --tracking-tight: -0.01em;
  --tracking-wide:  0.05em;

  /* ---- Spacing ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ---- Radii ---- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 16px;

  /* ---- Effects ---- */
  --shadow-glow:    0 0 24px var(--accent-glow);
  --shadow-glow-sm: 0 0 12px rgba(0, 255, 65, 0.3);
  --shadow-card:    0 6px 30px rgba(0, 0, 0, 0.45);

  /* ---- Layout ---- */
  --w-container: 1200px;
  --w-content:   780px;
  --header-h:    72px;

  /* ---- Motion ---- */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   150ms;
  --dur-base:   260ms;
  --dur-slow:   500ms;

  /* ---- Z-index ---- */
  --z-bg:      0;
  --z-base:    1;
  --z-header:  50;
  --z-overlay: 80;
  --z-modal:   100;
}