/* ============================================================
   SKILLEX — UNIFIED DESIGN TOKENS
   Dark theme is default (:root), light applied via .theme-light
   ============================================================ */

:root {
  /* Backgrounds */
  --bg:              #0a0a0f;
  --surface:         #111118;
  --surface-muted:   #18181f;
  --surface-soft:    #1e1e28;

  /* Borders */
  --line:            rgba(255, 255, 255, 0.06);
  --line-strong:     rgba(255, 255, 255, 0.12);

  /* Text */
  --text-primary:    #f4f4f8;
  --text-muted:      #8b8b9e;
  --text-soft:       #5c5c70;

  /* Brand */
  --accent:          #7c6fff;
  --accent-strong:   #6358e8;
  --accent-hover:    #8f85ff;
  --info:            #38bdf8;
  --danger:          #f43f5e;
  --warning:         #f59e0b;
  --success:         #22c55e;
  --tertiary:        #f472b6;

  /* Buttons */
  --btn-primary-text: #ffffff;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 40px rgba(124, 111, 255, 0.15);
}

/* ── LIGHT THEME ── */
body.theme-light {
  --bg:              #f5f5f9;
  --surface:         #ffffff;
  --surface-muted:   #f0f0f6;
  --surface-soft:    #e8e8f0;

  --line:            rgba(0, 0, 0, 0.07);
  --line-strong:     rgba(0, 0, 0, 0.14);

  --text-primary:    #0f0f1a;
  --text-muted:      #5a5a7a;
  --text-soft:       #9090aa;

  --accent:          #5b47f5;
  --accent-strong:   #4338ca;
  --accent-hover:    #6d5cff;
  --info:            #0284c7;
  --danger:          #e11d48;
  --warning:         #d97706;
  --success:         #16a34a;
  --tertiary:        #db2777;

  --btn-primary-text: #ffffff;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.10);
  --shadow-glow: 0 0 40px rgba(91, 71, 245, 0.08);
}