/* LIGHT THEME */
html[data-theme="light"] {
  --bg: #f8f9fb;
  --text: #222;
  --text-light: #555;
  --brand-my: #ffffff;
  --brand-career: #f1c40f;
  --topbar-bg: linear-gradient(90deg, #0f172a, #1e293b);
  --login-bg: rgba(255,255,255,0.15);
  --login-border: rgba(255,255,255,0.3);
  --nav-link: #e2e8f0;
  --nav-link-hover: #ffffff;
  --theme-icon: #ffffff;

  /* FOOTER (LIGHT) */
  --footer-bg: #ffffff;
  --footer-border: #e5e7eb;
  --footer-text: #222;
  --footer-text-muted: #555;
  --footer-bar-bg: #f1f5f9;
}

/* DARK THEME */
html[data-theme="dark"] {
  --bg: #0a0f1e;
  --text: #e2e8f0;
  --text-light: #cbd5e1;
  --brand-my: #ffffff;
  --brand-career: #f1c40f;
  --topbar-bg: linear-gradient(90deg, #1e293b, #0f172a);
  --login-bg: rgba(255,255,255,0.12);
  --login-border: rgba(255,255,255,0.28);
  --nav-link: #cbd5e1;
  --nav-link-hover: #ffffff;
  --theme-icon: #f1c40f;

  /* FOOTER (DARK) */
  --footer-bg: transparent;
  --footer-border: rgba(255,255,255,0.08);
  --footer-text: #cbd5e1;
  --footer-text-muted: #94a3b8;
  --footer-bar-bg: rgba(0,0,0,0.15);
}

/* Apply theme */
body {
  background: var(--bg);
  color: var(--text);
}