/* Handbook style: cream background, navy text, teal / mustard / terracotta accents.
   Baloo 2 + Hind will be self-hosted in a later stage; until then fall back to system fonts. */
:root {
  --cream: #fdf6e3;
  --navy: #14213d;
  --teal: #1b998b;
  --mustard: #e9b44c;
  --terracotta: #c8553d;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: "Hind", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
}
h1, h2, h3, .brand { font-family: "Baloo 2", "Hind", system-ui, sans-serif; line-height: 1.2; }
.site-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .75rem 1rem; background: var(--navy);
}
.brand { color: var(--cream); font-size: 1.4rem; text-decoration: none; font-weight: 700; }
.site-header nav { display: flex; gap: .5rem; align-items: center; }
.wrap { max-width: 36rem; margin: 0 auto; padding: 1rem; }
.btn, button, input[type=submit] {
  display: inline-block; min-height: 48px; padding: .6rem 1.2rem; border: 0; border-radius: .6rem;
  background: var(--teal); color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn-ghost { background: transparent; color: var(--cream); border: 2px solid var(--mustard); }
input[type=text], input[type=email], input[type=password], select {
  width: 100%; min-height: 48px; padding: .5rem .75rem; border: 2px solid var(--navy);
  border-radius: .5rem; font: inherit; background: #fff;
}
a { color: var(--teal); }
.messages { list-style: none; padding: .75rem 1rem; background: var(--mustard); border-radius: .5rem; }
.errorlist { color: var(--terracotta); padding-left: 1rem; }