/*
 * Theme: design tokens, Bootstrap variable overrides and typography.
 * Loaded first, after Bootstrap; the other stylesheets use these variables.
 */

/* === TOKENS === */
/* Overrides Bootstrap's own variables, so its components pick these up. */
:root,
[data-bs-theme=dark] {
  --accent: #5fd38d;
  --accent-rgb: 95, 211, 141;
  --accent-hover: #8fe3b0;
  --accent-hover-rgb: 143, 227, 176;

  /* Reading widths, measured at about 80 characters per line in Plex Sans:
     --measure for 17px post text, --measure-text for 16px page text */
  --measure: 40.25rem;
  --measure-text: 37.75rem;

  --bs-font-sans-serif: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-font-monospace: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --bs-link-color: var(--accent);
  --bs-link-color-rgb: var(--accent-rgb);
  --bs-link-hover-color: var(--accent-hover);
  --bs-link-hover-color-rgb: var(--accent-hover-rgb);

  /* Inline code: warm, so it isn't confused with links */
  --bs-code-color: #e5c07b;
}

/* === TYPOGRAPHY === */
/* Monospace for headings and UI; body text stays in Plex Sans.
   Components set their own monospace bits in their files. */
h1, h2, h3, h4, h5, h6,
.navbar,
.badge,
.figure-caption,
footer {
  font-family: var(--bs-font-monospace);
}

/* Plex Mono is wide, so scale headings down from Bootstrap's sizes.
   Screen only: print.css owns the printed resume layout. */
@media screen {
  h1, .h1 { font-size: 2rem; }
  h2, .h2 { font-size: 1.625rem; }
  h3, .h3 { font-size: 1.375rem; }
  h4, .h4 { font-size: 1.125rem; }
  h5, .h5 { font-size: 1rem; }
  h6, .h6 { font-size: 0.875rem; }
}

@media screen and (max-width: 575.98px) {
  h1, .h1 { font-size: 1.625rem; }
  h2, .h2 { font-size: 1.375rem; }
}