/* -------------------------------------------------
   ROOT VARIABLES & DARK MODE
-------------------------------------------------- */
:root {
  --bg-page: #f5f5f7;
  --bg-surface: #ffffff94;
  --bg-subtle: #f0f2f5;
  --text: #1a1f2a;
  --text-muted: #656b7a;
  --accent: #23737f;
  --accent-soft: #87b8c8ce;
  --overlay: rgba(41, 40, 40, 0.596);
  --muted: #f7f7f7;
  --card-border: #e0e0e0;
  --nav-bg: rgba(255,255,255,0.9);
  --nav-border: rgba(209,213,219,0.8);
  --nav-blur: blur(14px);
  --nav-link: #444;
  --nav-link-hover: #29646d;
  --border-subtle: #dde1ea;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-soft: 0 14px 35px rgba(25, 72, 98, 0.354);
  --transition-fast: 180ms ease-out;
}

.dark-mode {
  --bg: #0f1114;
  --bg-surface: #0f1114;
  --bg-subtle: #0f1114;
  --text: #e6e6e6;
  --overlay: rgba(0,0,0,0.6);
  --muted: #1a1d21;
  --card-border: #252b32;
  --nav-bg: rgba(15,17,20,0.75);
  --nav-border: rgba(255,255,255,0.08);
  --nav-link: #e0e0e0;
  --nav-link-hover: #fff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  transition: background .3s ease, color .3s ease;
}

/* -------------------------------------------------
   DARK MODE TOGGLE
-------------------------------------------------- */
#darkModeToggle {
  position: fixed;
  top: 15px;
  right: 20px;
  padding: 5px 14px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  z-index: 9999;
  font-weight: 600;
  font-size:.8rem;
}

html,
body {
  margin: 0;
  padding: 0;
}