/* 1. Register the "Machine" Font */
@font-face {
  font-family: "Numberplate";
  src: url("./fonts/NumberplateLLWeb-Switzerland.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

/* 2. Set the "Human" Font Stack */
/* Charter is built-in on many OSs; if missing, it falls back to similar smart serifs */
:root {
  --sans-font: "Numberplate", "Helvetica Neue", sans-serif;
  --serif-font: "Charter", "Bitstream Charter", "Sitka Text", "Cambria", serif;
}

/* 3. Apply the Hierarchy */

/* HEADERS = Switzerland (The Machine) */
h1, h2, h3, h4, .tick-label, .button-label {
  font-family: var(--sans-font);
  letter-spacing: -0.01em; /* Tweak tightness to match the reference */
  font-weight: 400; /* Numberplate is often bold by default, so keep weight low */
}

/* BODY = Charter (The Human) */
p, li, blockquote {
  font-family: var(--serif-font);
  font-size: 1.125rem; /* 18px - comfortable reading size */
  line-height: 1.6;
  max-width: 68ch; /* Optimal line length for reading */
  color: #e5e5e5; /* Soft white for dark mode */
}

/* The "Dispatch" Text Container */
.dispatch-text {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #333; /* A subtle divider between App and Text */
}