/* ── Central colour palette — edit here to experiment ───────────────────────
   All other CSS files reference these variables.
   ────────────────────────────────────────────────────────────────────────────*/

:root {

  /* ── Dark surfaces ──────────────────────────────────────────────────── */
  --bg-app:            #0f0f1a;   /* outermost page background */
  --bg-surface:        #1a1a2e;   /* toolbox, chat, panels */
  --bg-surface-2:      #22223a;   /* slightly lighter surfaces */
  --bg-surface-3:      #2a2a45;   /* hover / active states */
  --bg-elevated:       #33335a;   /* elevated elements */

  /* ── Neon accents ───────────────────────────────────────────────────── */
  --accent-purple:     #a855f7;   /* primary neon purple */
  --accent-purple-2:   #c084fc;
  --accent-teal:       #2dd4bf;   /* primary neon teal */
  --accent-teal-2:     #14b8a6;

  /* ── Semantic colours ───────────────────────────────────────────────── */
  --danger:            #ef4444;
  --danger-bg:         rgba(239, 68, 68, 0.12);
  --success:           #22c55e;
  --success-bg:        rgba(34, 197, 94, 0.12);
  --warning:           #f59e0b;

  /* ── Text ────────────────────────────────────────────────────────────── */
  --text-primary:      #e2e8f0;
  --text-secondary:    #94a3b8;
  --text-muted:        #64748b;
  --text-dark:         #1a1a2e;   /* used on light card faces */

  /* ── Borders & dividers ─────────────────────────────────────────────── */
  --border-default:    #33335a;
  --border-light:      #4a4a6a;

  /* ── Legacy light colours (for small elements like card faces) ──────── */
  --white:             #ffffff;
  --gray-100:          #f8f9fa;
  --gray-200:          #e9ecef;
  --gray-300:          #dee2e6;
  --gray-400:          #ced4da;
  --gray-500:          #adb5bd;
  --gray-600:          #6c757d;

  /* ── Bootstrap-ish overrides ────────────────────────────────────────── */
  --bs-dark:           #1a1a2e;
  --bs-info:           #0dcaf0;
  --bs-info-rgb:       13, 202, 240;
}