:root {
  --paper: #FBFCFE;
  --grid: #E1E8F2;
  --grid-strong: #C3CFDF;
  --ink: #1E3A8A;
  --ink-wash: #E8EDF8;
  --graphite: #23272E;
  --graphite-soft: #5A6170;
  --red-pen: #C62828;
  --green-pen: #2E7D32;
  --amber-pen: #C77700;
  --sans: "Rubik", "Segoe UI", system-ui, -apple-system, sans-serif;
  --hand: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--graphite);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}

input, textarea, select {
  font: inherit;
  color: var(--graphite);
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--grid-strong);
  border-radius: 6px;
  background: #fff;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-wash); }
input[type="checkbox"] { width: auto; }

textarea.lined {
  resize: vertical;
  line-height: 32px;
  padding: 4px 12px;
  background: #fff repeating-linear-gradient(transparent, transparent 31px, var(--grid) 31px, var(--grid) 32px);
  background-attachment: local;
}

.btn {
  font: inherit;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 6px;
  border: 1.5px solid var(--grid-strong);
  background: #fff;
  color: var(--graphite);
  cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--ink); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover:not(:disabled) { background: #16306F; }
.btn.danger { color: var(--red-pen); }
.btn.link { border: none; background: none; padding: 4px 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.btn.link.danger { color: var(--red-pen); }
.btn:disabled { opacity: .5; cursor: default; }
.btn:focus-visible, .mic:focus-visible, a:focus-visible { outline: 3px solid var(--amber-pen); outline-offset: 2px; }

.error { color: var(--red-pen); }