/* Business Habit — shared design tokens, reset and theme.
   Light theme is "newsprint": warm paper, ink-black type, hairline rules.
   Dark theme is "night edition": warm charcoal, never pure black. */

:root {
  --serif: "Iowan Old Style", "Charter", "Bitstream Charter", "Sitka Text", "Palatino Linotype", Cambria, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --bg: #fcfcfa;
  --bg-alt: #f3f2ee;
  --surface: #ffffff;
  --ink: #121212;
  --ink-2: #363636;
  --prose: #1b1b1b;
  --muted: #646464;
  --faint: #a3a3a0;
  --rule: #e2e1dc;
  --rule-mid: #d4d3cd;
  --rule-strong: #121212;
  --accent: #0b5e48;
  --accent-ink: #ffffff;
  --accent-soft: #e6efea;
  --hot: #b4301a;
  --hot-soft: #f8e5e0;
  --mark: #fbe8a4;
  --focus: #1f6feb;
  --shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 8px 24px rgb(0 0 0 / 8%);

  --radius: 3px;
  --max: 1240px;
  --gutter: clamp(1rem, 3vw, 2rem);

  color-scheme: light;
}

/* Night edition: warm charcoal paper and soft ink, tuned for long reads.
   Body text sits around 10:1 contrast, comfortably above WCAG AA, without
   the glare of white-on-black. */
:root[data-theme="dark"] {
  --bg: #1c1b19;
  --bg-alt: #242220;
  --surface: #262421;
  --ink: #e8e2d6;
  --ink-2: #c8c1b4;
  --prose: #d6cfc2;
  --muted: #a59d90;
  --faint: #7a7367;
  --rule: #383530;
  --rule-mid: #46433d;
  --rule-strong: #b9b2a5;
  --accent: #79c2a3;
  --accent-ink: #13201b;
  --accent-soft: #24372f;
  --hot: #ec7a5e;
  --hot-soft: #3d2620;
  --mark: #5b4c24;
  --focus: #8ab4f8;
  --shadow: 0 1px 2px rgb(0 0 0 / 25%), 0 8px 24px rgb(0 0 0 / 30%);
  color-scheme: dark;
}

/* Respect the OS setting before (or without) JavaScript. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #1c1b19; --bg-alt: #242220; --surface: #262421; --ink: #e8e2d6; --ink-2: #c8c1b4; --prose: #d6cfc2;
    --muted: #a59d90; --faint: #7a7367; --rule: #383530; --rule-mid: #46433d; --rule-strong: #b9b2a5; --accent: #79c2a3;
    --accent-ink: #13201b; --accent-soft: #24372f; --hot: #ec7a5e; --hot-soft: #3d2620; --mark: #5b4c24;
    --focus: #8ab4f8; color-scheme: dark;
  }
}

/* Dim photos a little at night so bright images don't flash. */
:root[data-theme="dark"] img { filter: brightness(.9) contrast(1.04); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) img { filter: brightness(.9) contrast(1.04); }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }
mark { background: var(--mark); color: inherit; padding: 0 .1em; }
code { font-family: var(--mono); font-size: .88em; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--accent-ink); }

.visually-hidden, .sr-only {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--bg); padding: .6rem 1rem; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.theme-toggle {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem;
  border: 1px solid var(--rule); border-radius: 50%; background: transparent; color: var(--ink);
  transition: border-color .15s, transform .3s;
}
.theme-toggle:hover { border-color: var(--ink); }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}