/* ================= LIGHT ================= */

:root {

  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #f6f4f9;

  --text: #111;
  --text-2: #1f2937;
  --text-muted: #6b7280;

  --border: #e5e7eb;

  --soft: #f5f5f7;
  --soft-2: #ececf1;

  --accent: #d8cbe2;
  --accent-2: #c4b5fd;

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
  --shadow: 0 6px 18px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 28px rgba(0,0,0,0.12);

  --overlay: rgba(255,255,255,0.18);
  --overlay-soft: rgba(0,0,0,0.2);

  --toast-bg: rgba(0,0,0,0.85);
  --toast-text: #fff;
}


/* ================= DARK ================= */

html[data-theme="dark"] {

  --bg: #111213;
  --surface: #1b1c1e;
  --surface-2: #202124;

  --text: #f1f1f1;
  --text-2: #d1d5db;
  --text-muted: #9ca3af;

  --border: #2a2b2e;

  --soft: #202124;
  --soft-2: #2a2b2e;

  --accent: #6d5a7f;
  --accent-2: #9aa7ff;

  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;

  --overlay: rgba(0,0,0,0.6);
  --overlay-soft: rgba(0,0,0,0.35);

  --toast-bg: rgba(0,0,0,0.7);
  --toast-text: #fff;
}