/* askannieanything.com — shared tokens and base. Black on white, typewriter. */
:root {
  color-scheme: light;
  --ink: #000;
  --paper: #fff;
  --ghost: #6b6b6b;
  --ui: 'Courier Prime', 'Courier New', Courier, 'Nimbus Mono PS', ui-monospace, monospace;
  --hero: 'VT323', var(--ui);
  --typewriter: 'Special Elite', var(--ui);
  --handwriting: 'Caveat Variable', 'Caveat', var(--ui);
  --terminal: 'VT323', var(--ui);
  --body: 17px;
  --lh: 1.5;
  --measure: 60ch;
  --gutter: 16px;
  --tap: 44px;
}

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

html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: var(--body);
  line-height: var(--lh);
  min-height: 100dvh;
}

a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: transparent;
  border-radius: 0;
}

button {
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  min-height: var(--tap);
  padding: 0 14px;
  cursor: pointer;
}
button.primary, button[aria-pressed="true"], button.active {
  background: var(--ink);
  color: var(--paper);
}
button:disabled { cursor: default; opacity: .6; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

::placeholder { color: var(--ghost); opacity: 1; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

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