/* --- Typefaces ---------------------------------------------------------- */

/* SELF-HOSTED, not loaded from a font CDN. A third-party font request on every
 * page load is a dependency on someone else's uptime and a third party watching
 * her visitors, for two files totalling 71 KB that can simply live here (root
 * §3.8). Both are SIL Open Font License — free for commercial use.
 *
 * Only the `latin` subset is shipped. The full families carry Cyrillic and
 * Vietnamese ranges that would roughly triple the payload for a Missoula dog
 * groomer.
 *
 * `font-display: swap` — text paints immediately in the fallback and reflows
 * when the face arrives. The alternative is invisible text for up to three
 * seconds, on a page whose whole job is being read in the first three.
 */
@font-face {
  font-family: "Pacifico";
  src: url("fonts/pacifico-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  /* One variable file covers 400 through 800, so weight costs no extra request. */
  src: url("fonts/nunito-latin.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  /* Type. The style guide asks for a playful heading face and a clean readable
   * body face; these are the two, named once so no rule types a stack inline. */
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Pacifico", "Segoe Script", "Brush Script MT", cursive;

  /* Brand, for fills */
  --pink: #ff6fae;
  --teal: #2ec4c7;
  --mint: #e6f7f8;
  --charcoal: #333333;
  --off-white: #f6f6f6;

  /* Accessible, for text */
  --pink-text: #c2185b;
  --teal-text: #00767a;

  --ink: #333333;
  --ink-soft: #5a5a5a;
  --line: #e4e4e4;
  --white: #ffffff;

  --warn-bg: #fff4e5;
  --warn-ink: #8a5300;
  --error-bg: #fdecef;
  --error-ink: #a4123f;
  --ok-bg: #e8f6ec;
  --ok-ink: #1b5e20;

  --content-max: 1120px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 2px 10px rgba(51, 51, 51, 0.08);
  --shadow-lifted: 0 6px 20px rgba(51, 51, 51, 0.12);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
}