/* ============================================================
   HOOKIE.NET — Design Tokens
   All design decisions live here. Edit this file to retheme.
   ============================================================ */

:root {

  /* --- Backgrounds (slate-navy, cool and clean) --- */
  --bg:           #0d1117;
  --bg-2:         #161b22;
  --bg-3:         #1c2128;
  --surface:      #21262d;
  --surface-2:    #2d333b;
  --surface-3:    #373e47;

  --border:       rgba(255,255,255,0.06);
  --border-2:     rgba(255,255,255,0.11);
  --border-3:     rgba(255,255,255,0.20);

  /* --- Brand Colors (social blue + indigo accent) --- */
  --flame:        #4c8eff;   /* primary blue  */
  --flame-2:      #7aafff;   /* lighter blue  */
  --flame-3:      #a8cfff;   /* softest blue  */
  --rose:         #6c52e3;   /* indigo/violet accent */
  --amber:        #f0b429;   /* gold — featured badges */
  --teal:         #22d3a0;   /* verified / teal */
  --online:       #4ade80;   /* online green (keep) */
  --error:        #f87171;   /* error red (keep) */

  /* --- Text (slate-white, not purple-tinted) --- */
  --text:         #e6edf3;
  --text-2:       #8b949e;
  --text-3:       #484f58;
  --text-4:       #30363d;

  /* --- Gradients --- */
  --grad-brand:   linear-gradient(135deg, var(--flame) 0%, #8b6ef5 100%);
  --grad-amber:   linear-gradient(135deg, var(--amber), #f97316);
  --grad-teal:    linear-gradient(135deg, var(--teal), var(--flame));
  --grad-surface: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);

  /* --- Shadows --- */
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.35);
  --shadow-md:    0 8px 32px rgba(0,0,0,0.5);
  --shadow-lg:    0 20px 60px rgba(0,0,0,0.65);
  --glow-flame:   0 0 40px rgba(76,142,255,0.22);
  --glow-rose:    0 0 40px rgba(108,82,227,0.2);

  /* Border Radius */
  --radius-xs:    6px;
  --radius-sm:    10px;
  --radius:       16px;
  --radius-lg:    24px;
  --radius-pill:  9999px;

  /* Spacing Scale */
  --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;

  /* Layout */
  --nav-height:   68px;
  --sidebar-w:    248px;

  /* Typography */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;

  /* Transitions */
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:     120ms;
  --dur-med:      220ms;
  --dur-slow:     400ms;
}