/* ═══════════════════════════════════════════════════════════
   REELFLOW — VARIABLES & DESIGN TOKENS
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Colors */
  --bg:           #0a0a0f;
  --bg-2:         #111118;
  --bg-3:         #18181f;
  --bg-4:         #1f1f2a;
  --surface:      #1a1a24;
  --surface-2:    #222230;
  --border:       rgba(255,255,255,0.07);
  --border-hover: rgba(255,255,255,0.14);

  --text-1:       #f0f0f8;
  --text-2:       #9898b8;
  --text-3:       #6060808;
  --text-muted:   #505068;

  --accent:       #7c6dfa;
  --accent-2:     #5a4de8;
  --accent-glow:  rgba(124, 109, 250, 0.25);
  --accent-light: rgba(124, 109, 250, 0.12);

  --success:      #22c97a;
  --success-bg:   rgba(34, 201, 122, 0.1);
  --warning:      #f5a623;
  --warning-bg:   rgba(245, 166, 35, 0.1);
  --danger:       #f56565;
  --danger-bg:    rgba(245, 101, 101, 0.1);
  --info:         #63b3ed;
  --info-bg:      rgba(99, 179, 237, 0.1);

  /* Platform colors */
  --ig-1:         #f09433;
  --ig-2:         #e6683c;
  --ig-3:         #dc2743;
  --ig-4:         #cc2366;
  --ig-5:         #bc1888;

  /* Typography */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Spacing */
  --sidebar-w:    240px;
  --topbar-h:     64px;
  --radius-sm:    6px;
  --radius:       10px;
  --radius-lg:    16px;
  --radius-xl:    24px;

  /* Shadows */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.4);
  --shadow:       0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.6);
  --shadow-accent:0 4px 24px rgba(124,109,250,0.3);

  /* Transitions */
  --transition:   0.2s ease;
  --transition-slow: 0.4s ease;
}