/* ------------------------------------------------------------------
   base.css — design tokens, reset, and global element styles
   ------------------------------------------------------------------ */

:root {
  /* Surfaces & ink */
  --bg: #e9e9e7;
  --surface: #f4f3f0;
  --surface-dim: #dcdad4;
  --ink: #141414;
  --text: #2b2a27;
  --text-soft: #3b3a37;
  --text-strong: #26251f;
  --gray: #6e6c67;
  --gray-mid: #5c5a55;
  --gray-faint: #8b8984;
  --gray-dim: #7d7b76;
  --gray-deep: #4b4945;

  /* Accents */
  --red: #b8391c;
  --red-dark: #8f2c14;
  --teal: #17606b;
  --teal-dark: #124b54;
  --teal-pale: #9fd4da;
  --teal-dot: #8fd0d8;
  --gold: #9a6a05;
  --gold-dark: #7a5304;

  /* Light text on accent backgrounds */
  --paper: #f4f3f0;
  --paper-red: #f9f2f0;
  --paper-teal: #f1f4f4;
  --paper-gold: #f7f3ea;

  /* Rules */
  --line: rgba(0, 0, 0, .18);
  --line-soft: rgba(0, 0, 0, .14);
  --line-strong: rgba(0, 0, 0, .2);
  --line-chart: rgba(0, 0, 0, .3);

  /* Type */
  --sans: "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

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

a:hover {
  color: var(--red-dark);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

img,
svg {
  max-width: 100%;
}