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

/* === Base HTML & Body Styles === */
html {
  font-size: 1rem; /* 16px base for rem scaling */
  scroll-behavior: smooth;
}

/* Font stack: Apple, Chrome, Windows, Android, macOS, fallback */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  background-color: var(--bg);
  color: var(--text);
  text-align: center;
  margin: 0;
  padding: 0;
}

/* === Headings === */
h1 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

h2 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

/* === Paragraphs === */
p {
  font-size: 1.2rem;
}

/* === Tables === */
caption {
  font-weight: bold;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  text-align: left;
}

/* === Links & Buttons === */
a,
button {
  border: none;
  padding: 0.5em 1em;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  background: none;
  color: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent, #007bff);
  outline-offset: 3px;
}