/*
 * css/tokens.css
 * ─────────────────────────────────────────────────────────────
 * Design tokens — every color, radius, and font variable.
 * Change a value here and it updates the entire app.
 *
 * Color naming convention:
 *   --bg        → page background
 *   --surface   → card / panel backgrounds
 *   --surface2  → slightly elevated surface (inputs, hover states)
 *   --border    → default border
 *   --border2   → stronger border (hover / active)
 *   --accent    → lime green — primary brand action color
 *   --accent2   → darker lime — hover state for accent
 *   --text      → primary text
 *   --muted     → secondary / helper text
 *   --muted2    → very faint labels (section headers)
 *   --danger    → destructive actions (delete, error)
 *   --info      → informational (blue)
 * ─────────────────────────────────────────────────────────────
 */

:root {
  /* ── Backgrounds ── */
  --bg:       #0f0f11;
  --surface:  #18181c;
  --surface2: #222228;

  /* ── Borders ── */
  --border:  #2e2e38;
  --border2: #3e3e4a;

  /* ── Brand accent (lime) ── */
  --accent:  #c8f060;
  --accent2: #9de04a;

  /* ── Text ── */
  --text:   #f0f0f0;
  --muted:  #888890;
  --muted2: #5a5a68;

  /* ── Semantic ── */
  --danger: #ff6b6b;
  --info:   #60b8f0;

  /* ── Shape ── */
  --radius:    10px;
  --radius-lg: 16px;
}