/* ===========================================================
   Base reset and body styles
   =========================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "ss01", "onum";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* subtle paper texture via SVG */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}
[data-palette="forensic"] body::before { mix-blend-mode: screen; opacity: .25; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

button { font: inherit; cursor: pointer; }

/* Selection */
::selection { background: var(--highlight); color: var(--ink); }