/* =========================================================
   ROOT VARIABLES
   ========================================================= */
:root {
  --bg-color: #eef2f7;
  --btn-bg: #2563eb;
  --btn-text: #f9fafb;
  --card-bg: #ffffff;
  --card-border: #ccc;
  --card-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  --card-shadow-hover: 0 6px 14px rgba(0, 0, 0, 0.18);
  --modal-bg: #ffffff;
  --modal-text: #111827;
  --nav-bg: #0078d4;
  --nav-text: #ffffff;
  --text-main: #222;
  --text-sub: #444;
}

[data-theme="dark"] {
  --bg-color: #111827;
  --btn-bg: #2563eb;
  --btn-text: #f9fafb;
  --card-bg: #1f2937;
  --card-border: #333;
  --card-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
  --card-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.9);
  --modal-bg: #1f2937;
  --modal-text: #f3f4f6;
  --nav-bg: #0f172a;
  --nav-text: #e5e7eb;
  --text-main: #f9fafb;
  --text-sub: #d1d5db;
}

/* =========================================================
   GLOBAL ELEMENTS
   ========================================================= */
* {
  box-sizing: border-box;
}

body {
  background: var(--bg-color);
  color: var(--text-main);
  font-family: Arial, sans-serif;
  font-size: 12px;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
}