:root {
  /* Default: Valorant High-Tech Dark Theme */
  --bg: #050d1b;
  --surface: #0d1a2f;
  --ink: #edf4ff;
  --muted: #94a4bc;
  --line: #20314d;
  --blue: #1557ff;
  --blue-hover: #0648e6;
  --cyan: #45d7ff;
  --navy: #020817;
  --sidebar-bg: #040a14;
  --sidebar-hover: #0a172a;
  --sidebar-active: #172d55;
  --success: #1bb68a;
  --success-bg: #07261e;
  --success-text: #45d6a7;
  --warning: #ffb528;
  --warning-bg: #2d1f05;
  --warning-text: #ffca60;
  --danger: #ff4655;
  --danger-bg: #2d0e12;
  --danger-text: #ff7a86;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.38);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.25);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background: #050d1b;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  transition: background-color 0.25s, color 0.25s;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--ink);
}

button, input, select, textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Default Dark Elements */
.stat,
.panel,
.modal-card,
.card {
  background: var(--surface);
  border-color: var(--line);
}

input,
select,
textarea {
  background: #071326;
  color: var(--ink);
  border-color: var(--line);
}

td,
th {
  border-color: #20314d;
}

/* Backwards compatibility for body.dark */
body.dark {
  color-scheme: dark;
}

body.dark .stat,
body.dark .panel,
body.dark .modal-card,
body.dark .card {
  background: var(--surface);
  border-color: var(--line);
}

body.dark input,
body.dark select,
body.dark textarea {
  background: #071326;
  color: var(--ink);
  border-color: var(--line);
}

body.dark td,
body.dark th {
  border-color: #20314d;
}

/* Optional Light Mode Override (if user explicitly toggles theme) */
body.light {
  --bg: #f7f9fc;
  --surface: #ffffff;
  --ink: #0b1830;
  --muted: #6e7b91;
  --line: #e3e9f2;
  --navy: #071326;
  --sidebar-bg: #07162c;
  --sidebar-hover: #122543;
  --sidebar-active: #163364;
  --success: #1bb68a;
  --success-bg: #dff9f0;
  --success-text: #078861;
  --warning: #ffb528;
  --warning-bg: #fff8e7;
  --warning-text: #b37400;
  --danger: #ff4655;
  --danger-bg: #ffebee;
  --danger-text: #bd3c49;
  --shadow: 0 18px 60px rgba(15, 48, 110, 0.12);
  --shadow-sm: 0 4px 14px rgba(15, 48, 110, 0.08);
  color-scheme: light;
}

body.light .stat,
body.light .panel,
body.light .modal-card,
body.light .card {
  background: var(--surface);
  border-color: var(--line);
}

body.light input,
body.light select,
body.light textarea {
  background: #ffffff;
  color: var(--ink);
  border-color: var(--line);
}

body.light td,
body.light th {
  border-color: #e3e9f2;
}