/* css/variables.css */

:root {
  /* Tema Abu-abu Elegan (Light Mode) */
  --bg: #f0f2f5; /* Latar belakang sangat terang, abu-abu kebiruan */
  --fg: #34495e; /* Teks utama, abu-abu gelap */
  --input-bg: #ffffff; /* Latar belakang input putih bersih */
  --border: #dcdfe6; /* Batas elemen yang lembut */
  --accent: #6c757d; /* Abu-abu kebiruan sebagai aksen */
  --accent-hover: #5a6268; /* Sedikit lebih gelap saat hover */
  --modal-bg: rgba(0, 0, 0, 0.4);
  --shadow-light: rgba(0, 0, 0, 0.08);
  --shadow-medium: rgba(0, 0, 0, 0.12);
  --error-border: #dc3545;
  --error-bg: #ffebeb;

  /* Warna untuk animasi background light mode (abu-abu halus) */
  --bg-gradient-start-light: #e0e4e8;
  --bg-gradient-end-light: #f0f4f7;

  /* Warna untuk toggle switch */
  --toggle-bg-light: #ccc;
  --toggle-circle-light: white;
  --toggle-checked-bg-light: #2196F3; /* Warna biru */
  --toggle-checked-circle-light: white;

  /* Notifikasi */
  --notification-success-bg: #d4edda;
  --notification-success-fg: #155724;
  --notification-border: #c3e6cb;

  --notification-error-bg: #f8d7da; /* Latar belakang merah muda */
  --notification-error-fg: #721c24; /* Teks merah tua */
  --notification-error-border: #f5c6cb; /* Border merah muda */

  --highlight-bg: #efff08; /* Kuning muda */
  --highlight-text: hsl(0, 0%, 23%); /* Coklat tua */
}

body.dark {
  /* Tema Abu-abu Elegan (Dark Mode) */
  --bg: #212529; /* Latar belakang sangat gelap, hampir hitam */
  --fg: #e0e6eb; /* Teks utama terang, abu-biru */
  --input-bg: #343a40; /* Latar belakang input gelap */
  --border: #495057; /* Batas elemen yang lebih gelap */
  --accent: #adb5bd; /* Abu-abu terang sebagai aksen */
  --accent-hover: #9ca6ad; /* Sedikit lebih gelap saat hover */
  --modal-bg: rgba(255, 255, 255, 0.1);
  --shadow-light: rgba(255, 255, 255, 0.05);
  --shadow-medium: rgba(255, 255, 255, 0.1);
  --error-border: #ff6b6b;
  --error-bg: #4a1c1c;

  /* Warna untuk animasi background dark mode (abu-abu gelap halus) */
  --bg-gradient-start-dark: #2c2f33;
  --bg-gradient-end-dark: #3a3f44;

  /* Warna untuk toggle switch di dark mode */
  --toggle-bg-dark: #555;
  --toggle-circle-dark: white;
  --toggle-checked-bg-dark: #4CAF50; /* Warna hijau */
  --toggle-checked-circle-dark: white;

  /* Notifikasi */
  --notification-success-bg: #1e4c2a;
  --notification-success-fg: #d4edda;
  --notification-border: #28a745;

  --notification-error-bg: #4a1c1c; /* Latar belakang merah gelap */
  --notification-error-fg: #f8d7da; /* Teks merah muda */
  --notification-error-border: #dc3545; /* Border merah */

  --highlight-bg: #adb5bd; /* Biru tua */
  --highlight-text: #000000; /* Putih kebiruan */
}