/* ─────────────────────────────────────────
   variables.css — Design tokens
   Edit here to retheme the entire app
───────────────────────────────────────── */

:root {
  /* ── Fonts ── */
  --font-ui:      'Syne', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* ── Panel colors ── */
  --bg-app:       #0d0d0f;
  --bg-panel:     #141416;
  --bg-section:   #141416;
  --bg-input:     #1e1e22;
  --bg-input-hover: #252529;
  --bg-btn:       #1e1e22;
  --bg-btn-hover: #28282d;
  --bg-btn-active:#2e2e35;

  /* ── Borders ── */
  --border:       rgba(255,255,255,0.07);
  --border-focus: rgba(255,255,255,0.2);

  /* ── Text ── */
  --text-primary:   #e8e8ed;
  --text-secondary: #7a7a88;
  --text-muted:     #4a4a55;
  --text-accent:    #4cf0c8;

  /* ── Accent ── */
  --accent:         #4cf0c8;
  --accent-dim:     rgba(76,240,200,0.15);
  --accent-glow:    rgba(76,240,200,0.4);

  /* ── Panel dimensions ── */
  --panel-width:  248px;
  --panel-header-h: 52px;

  /* ── Spacing ── */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  12px;
  --sp-lg:  16px;
  --sp-xl:  24px;

  /* ── Radius ── */
  --r-sm:   4px;
  --r-md:   7px;
  --r-lg:   10px;
  --r-full: 999px;

  /* ── Transitions ── */
  --t-fast:  0.1s ease;
  --t-med:   0.18s ease;
  --t-slow:  0.3s ease;

  /* ── Shadows ── */
  --shadow-panel: -1px 0 0 var(--border);
  --shadow-fab:   0 4px 20px rgba(0,0,0,0.6);
}