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

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

body {
  margin: 0;
  font-family:
    'Computer Modern',
    'CMU Serif',
    Georgia,
    'Times New Roman',
    serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  transition: background-color 0.25s ease, color 0.25s ease;
}

::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

a { color: var(--accent); }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

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

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }

.container {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

.mono,
code,
pre,
textarea.md-input {
  font-family: ui-monospace, 'JetBrains Mono', 'Cascadia Code', 'Fira Code',
    Menlo, Consolas, monospace;
}

// ---------- Scrollbars (subtle, webkit) ----------
::-webkit-scrollbar { width: 11px; height: 10px; }

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box;

  &:hover {
    background: color-mix(in srgb, var(--text) 30%, transparent);
    background-clip: content-box;
  }
}