/* Colours and type in one place. Ask your AI helper to change these to your own.
   These pass WCAG 2.1 level AA contrast in light and dark. Check new colours the same way. */
:root {
  --accent: #2f5d8a;
  --paper: #f6f6f4;
  --surface: #ffffff;
  --ink: #1b1e20;
  --muted: #58636b;
  --line: #d5d9da; /* Decoration only: too pale for the edge of a field or button. */
  --edge: #58636b; /* The edge of fields and options. */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #8ab4dc;
    --paper: #14181b;
    --surface: #1f262b;
    --ink: #e8ecee;
    --muted: #a3aeb5;
    --line: #34424b;
    --edge: #a3aeb5;
  }
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1.0625rem/1.55 var(--sans);
}

h1, h2 {
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}
h1 { font-size: clamp(1.75rem, 5vw, 2.4rem); }
h2 { font-size: 1.35rem; }

a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.page {
  max-width: 38rem;
  margin: 0 auto;
  padding: 3rem 1.25rem;
}
.quiet { color: var(--muted); font-size: 0.95rem; }

/* Forms */
form { display: grid; gap: 0.75rem; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; margin-bottom: 0.5rem; }
input[type="text"], input[type="email"], input[type="number"], select, textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 4px;
  padding: 0.6rem 0.75rem;
}
button {
  justify-self: start;
  font: inherit;
  font-weight: 600;
  color: var(--paper);
  background: var(--accent);
  border: 0;
  border-radius: 4px;
  padding: 0.7rem 1.25rem;
  cursor: pointer;
}
button:disabled { opacity: 0.6; cursor: default; }