:root {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Gruvbox Dark Theme */
  --bg: #282828;
  --bg1: #3c3836;
  --bg2: #504945;
  --bg3: #665c54;
  --bg4: #7c6f64;
  --fg: #ebdbb2;
  --fg1: #d5c4a1;
  --fg2: #bdae93;
  --fg3: #a89984;
  --fg4: #928374;
  --red: #cc241d;
  --green: #98971a;
  --yellow: #d79921;
  --blue: #458588;
  --purple: #b16286;
  --aqua: #689d6a;
  --orange: #d65d0e;
  --bg-rgb: 40, 40, 40;
  --bg1-rgb: 60, 56, 54;
  --bg2-rgb: 80, 73, 69;
  --bg3-rgb: 102, 92, 84;
  --bg4-rgb: 124, 111, 100;
  --fg-rgb: 235, 219, 178;
  --fg1-rgb: 213, 196, 161;
  --fg2-rgb: 189, 174, 147;
  --fg3-rgb: 168, 153, 132;
  --fg4-rgb: 146, 131, 116;
  --red-rgb: 204, 36, 29;
  --green-rgb: 152, 151, 26;
  --yellow-rgb: 215, 153, 33;
  --blue-rgb: 69, 133, 136;
  --purple-rgb: 177, 98, 134;
  --aqua-rgb: 104, 157, 106;
  --orange-rgb: 214, 93, 14;
  color: var(--fg);
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg1) 50%, var(--bg2) 100%);
  --primary: var(--blue);
  --secondary: var(--aqua);
  --accent: var(--purple);
  --primary-rgb: var(--blue-rgb);
  --secondary-rgb: var(--aqua-rgb);
  --accent-rgb: var(--purple-rgb);
  --success: var(--green);
  --warning: var(--yellow);
  --danger: var(--red);
  --success-rgb: var(--green-rgb);
  --warning-rgb: var(--yellow-rgb);
  --danger-rgb: var(--red-rgb);
  --text: var(--fg);
  --muted: var(--fg4);
  --card-bg: var(--bg1);
  --border: var(--bg3);
  --shadow: 0 10px 25px rgba(var(--bg3-rgb), 0.45);
  --shadow-hover: 0 20px 40px rgba(var(--bg4-rgb), 0.55);
  --glow: 0 0 20px rgba(var(--blue-rgb), 0.5);
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  padding: clamp(1rem, 3vw, 3rem);
  background: var(--bg);
  animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

h1, h2, h3, h4, h5, h6 { color: var(--primary); }
.muted { color: var(--muted); }