/* ---------------------------------------------------------------------------
   Stoop & Kin design tokens.

   Three rules drive everything here, and they are not decoration:

   1. Size is a setting, not a constant. Every length is in rem, and the root
      font size is multiplied by --scale, which the reader controls. Bumping
      text up two steps must not break a layout or clip a button.
   2. Edges, not shadows. Low-contrast drop shadows disappear entirely to an
      eye with cataracts. Cards are separated by a real 2px border.
   3. Nothing important is smaller than a fingertip. --tap (3.75rem = 60px at
      the default scale) is the floor for anything you press.
   --------------------------------------------------------------------------- */

:root {
  --scale: 1;

  /* Warm paper rather than white: less glare, easier on aging eyes. */
  --paper: #fdf8f2;
  --card: #ffffff;
  --ink: #1d1815;
  --ink-soft: #574d45;
  --line: #ddd0c2;

  --accent: #b4472c;        /* terracotta -- actions, current page */
  --accent-soft: #fbeae4;
  --go: #2f6b46;            /* green -- confirmations, "done" */
  --go-soft: #e4f0e8;
  --alert: #a3341f;
  --alert-soft: #fbe6e1;
  --info: #2b5d86;
  --info-soft: #e5eef6;

  --radius: 1rem;
  --tap: 3.75rem;
  --gap: 1.25rem;

  /* 18px is already a step up from the 16px default; the reader takes it
     further with the A+ control in the header. */
  font-size: calc(18px * var(--scale));
  color-scheme: light;
}

/* One toggle, high contrast: pure black on white, heavier lines. Offered
   because a warm palette that helps most readers helps some readers less. */
:root[data-contrast='high'] {
  --paper: #ffffff;
  --card: #ffffff;
  --ink: #000000;
  --ink-soft: #000000;
  --line: #000000;
  --accent: #8c0000;
  --accent-soft: #ffffff;
  --go: #00441f;
  --go-soft: #ffffff;
  --alert: #8c0000;
  --alert-soft: #ffffff;
  --info: #00306e;
  --info-soft: #ffffff;
}

:root[data-contrast='high'] .card,
:root[data-contrast='high'] .btn {
  border-width: 3px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Verdana', 'Segoe UI', system-ui, sans-serif;
  line-height: 1.55;
  /* Room for the fixed bottom bar, plus the phone's home indicator. */
  padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.08rem; }
p { margin: 0 0 0.75rem; }

/* Focus has to be unmissable -- many readers navigate by keyboard or by a
   stylus that does not hover. */
:focus-visible {
  outline: 4px solid var(--info);
  outline-offset: 3px;
  border-radius: 0.5rem;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1rem;
}

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

/* "Skip to content" is standard practice and doubly useful here, where the
   header carries the text-size controls the reader may need first. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 1rem;
  z-index: 100;
}
.skip:focus { left: 0; }

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