html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ==========================================================
   COLOR THEMES
   ========================================================== */

/* Default (light) */
:root {
  --bg: #f5f9ff;
  --surface: #ffffff;
  --text: #111827;
  --muted: #6b7280;

  --link: #2563eb;
  --border: #dddddd;
  --table-stripe: #f3f4f6;
  --shadow: 0 8px 24px rgba(0,0,0,.06);

  color-scheme: light;
}

/* Automatic theme */
html[data-theme="auto"] {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --bg: #111827;
    --surface: #1f2937;
    --text: #f3f4f6;
    --muted: #9ca3af;

    --link: #7db4ff;
    --border: #374151;
    --table-stripe: #273244;
    --shadow: 0 8px 24px rgba(0,0,0,.35);
  }
}

/* Light theme */
html[data-theme="light"] {
  --bg: #f5f9ff;
  --surface: #ffffff;
  --text: #111827;
  --muted: #6b7280;

  --link: #2563eb;
  --border: #dddddd;
  --table-stripe: #f3f4f6;
  --shadow: 0 8px 24px rgba(0,0,0,.06);

  color-scheme: light;
}

/* Dark theme */
html[data-theme="dark"] {
  --bg: #111827;
  --surface: #1f2937;
  --text: #f3f4f6;
  --muted: #9ca3af;

  --link: #7db4ff;
  --border: #374151;
  --table-stripe: #273244;
  --shadow: 0 8px 24px rgba(0,0,0,.35);

  color-scheme: dark;
}

/* ==========================================================
   GLOBAL ELEMENTS
   ========================================================== */

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

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

a:hover {
  text-decoration: underline;
}