/* jen — site styles: tokens, resets and the film grain. The other parts live next to this file; no build step, no external requests. */

/* buttons look like plain text until a component styles them (:where keeps this overridable) */
:where(button) {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

:root {
  /* light-dark(light, dark): one table for both themes. The system preference
     decides, and data-theme (set by the toggle) overrides it via color-scheme. */
  color-scheme: light dark;
  --bg: light-dark(#fbf0ec, #171414);
  --bg-2: light-dark(#f3dfd8, #322);
  --fg: light-dark(#2b1a1a, #ffe7e0);
  --muted: light-dark(#7a5c56, #a87);
  --accent: light-dark(#cc2f4b, #f77);
  --accent-ink: light-dark(#ffffff, #110f0b);
  --card: light-dark(#fff8f5, #181510);
  --border: light-dark(#ead0c8, #2f2b22);
  --term-bg: light-dark(#1d1515, #0a0906);
  --term-fg: #f2ede2;
  --term-dim: #8a8579;
  --term-add: #8fd05a;
  --term-mod: #f0b43c;
  --term-del: #ff6b5e;
  --term-line: rgba(255, 255, 255, 0.07);  /* hairlines and chips on the terminal background */
  --text-label: 0.75rem;   /* eyebrows, kickers, badges, chips */
  --text-small: 0.875rem;  /* secondary text, code, terminals, cards */
  --text-body: 1rem;       /* body copy */
  --text-title: 1.5rem;    /* small serif headings */
  --text-heading: clamp(2.25rem, 6vw, 4.5rem);  /* big serif headings */
  --space-s: 0.5rem;   /* spacing scale, for margins, gaps and padding */
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 3rem;
  --radius-s: 0.375rem;  /* code, small buttons */
  --radius-m: 1rem;      /* cards, terminals */
  --radius-l: 1.75rem;   /* the install block */
  --radius-pill: 100vmax;
  --grain: light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.05));  /* painted through the noise */

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }


body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--text-body);
  line-height: 1.65;
  overflow-x: hidden;
}

/* film grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: var(--grain);
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

::selection { background: var(--accent); color: var(--accent-ink); }
a { color: inherit; }
:focus-visible { outline: 0.125rem solid var(--accent); outline-offset: 0.1875rem; border-radius: var(--radius-s); }