/* ═══════════════════════════════════════
   VLADFX DESIGN TOKENS
   Single source of truth for all colors, 
   spacing, typography, and radii.
   ═══════════════════════════════════════ */

:root {
  /* ── Backgrounds ── */
  --bg:      #08080a;
  --bg2:     #111114;
  --bg3:     #1a1a1f;
  --border:  #2a2a30;

  /* ── Text ── */
  --text:    #f0f0f2;
  --dim:     #8e8e96;
  --dimmer:  #4a4a52;

  /* ── Brand (coral-red from logo) ── */
  --brand:       #f44041;
  --brand-soft:  rgba(244,64,65,.12);
  --brand-glow:  rgba(244,64,65,.06);
  --brand2:      #ff6b6b;

  /* ── Category colors ── */
  --purple:      #a78bfa;
  --purple-soft: rgba(167,139,250,.10);
  --green:       #34d399;
  --green-soft:  rgba(52,211,153,.10);
  --orange:      #fb923c;
  --orange-soft: rgba(251,146,60,.10);
  --blue:        #60a5fa;
  --blue-soft:   rgba(96,165,250,.10);
  --yellow:      #fbbf24;
  --yellow-soft: rgba(251,191,36,.10);
  --cyan:        #22d3ee;
  --cyan-soft:   rgba(34,211,238,.10);

  /* ── Radius ── */
  --radius: 14px;

  /* ── Transitions ── */
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-spring:   cubic-bezier(.19,1,.22,1);

  /* ── Z-index layers ── */
  --z-nav:     1000;
  --z-cursor:  9999;
  --z-overlay: 9000;
}