/* Shared design tokens + base reset for saloon.fyi.
   Loaded by every page through templates/head.html. Single source of truth —
   page-specific styles live in their own stylesheet beside this one. */

:root {
  --bg: #08080a;
  --fg: #f4f3ee;
  --fg-2: rgba(244, 243, 238, 0.86);
  --fg-3: rgba(244, 243, 238, 0.66);
  --fg-4: rgba(244, 243, 238, 0.42);
  --line: rgba(244, 243, 238, 0.14);
  --accent: #3a5bff;
  --accent-soft: #b8c8ff;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;

  /* templates/head.html sets viewport-fit=cover, so a page is laid out across
     the whole screen rather than inside the safe area: backgrounds, the
     particle canvas and the scrims reach the edges, and content keeps
     scrolling under the status bar and under Safari's floating toolbar
     instead of stopping at a black band above it. The cost is that anything
     the reader has to see or tap must add the inset back by hand — every such
     rule reads these four, and they are 0px on a device with no insets. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

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

/* Improve line rag and discourage short last lines. The hard guarantee against
   single-word orphans is the widont pass (js/widont.js, on index and legal);
   this is the progressive-enhancement layer on top. */
p { text-wrap: pretty; }

/* The italic turn in a display heading, on every page. */
h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--fg-2);
}

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Sized to the large viewport for the same reason as the canvas in home.css:
   a fixed overlay that stops at the dynamic viewport leaves the strip behind
   Safari's toolbar ungrained. */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
  z-index: 50;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/></svg>");
}