/* css/variables.css */
:root {
  --bg-1: #0f0c29;
  --bg-2: #302b63;
  --bg-3: #24243e;
  --card-bg: rgba(255, 255, 255, 0.06);
  --card-border: rgba(255, 255, 255, 0.12);
  --card-hover: rgba(255, 255, 255, 0.10);
  --input-bg: rgba(0, 0, 0, 0.2);
  --field-bg: rgba(0, 0, 0, 0.3);
  --option-bg: #1e1b4b;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --accent: #818cf8;
  --accent-2: #c084fc;
  --accent-glow: rgba(129, 140, 248, 0.35);
  --toast-bg: rgba(15, 23, 42, 0.94);
  --toast-text: #fff;
  --modal-bg: linear-gradient(135deg, rgba(30, 27, 75, 0.98), rgba(48, 43, 99, 0.98));
  --radius: 16px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --danger: #f87171;
  --success: #22c55e;
  --warning: #f59e0b;
}

html[data-theme="light"] {
  --bg-1: #eef2ff;
  --bg-2: #e0e7ff;
  --bg-3: #f5f3ff;
  --card-bg: rgba(255, 255, 255, 0.75);
  --card-border: rgba(99, 102, 241, 0.18);
  --card-hover: rgba(255, 255, 255, 0.95);
  --input-bg: rgba(255, 255, 255, 0.85);
  --field-bg: rgba(241, 245, 249, 0.95);
  --option-bg: #ffffff;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --accent: #6366f1;
  --accent-2: #a855f7;
  --accent-glow: rgba(99, 102, 241, 0.22);
  --toast-bg: rgba(30, 41, 59, 0.95);
  --toast-text: #f1f5f9;
  --modal-bg: linear-gradient(135deg, #ffffff, #f0f4ff);
}