/* ============================================================
   READ. PLAY. ATELIER. BUILD CONTRACT
   One rule set. Reuse everywhere.
   ============================================================ */

:root {
  /* Core brand */
  --rpa-navy: #064789;
  --rpa-olive: #679436;
  --rpa-tan: #e8b262;
  --rpa-rose: #d87c74;
  --rpa-cream: #fdf8f0;
  --rpa-bark: #2a3d1c;
  --rpa-steel: #427aa1;

  /* Teaching colors */
  --rpa-vowel: #d87c74;
  --rpa-letter-b: #427aa1;
  --rpa-letter-d: #e8b262;
  --rpa-glued: #a5be00;

  /* Stage colors */
  --rpa-stage-prereader: #679436;
  --rpa-stage-beginning: #e8b262;
  --rpa-stage-readtolearn: #064789;
  --rpa-stage-advanced: #d87c74;
}

/* Typography contract */
.rpa-title,
[data-rpa-title] {
  font-family: "Fredoka One", "Nunito", sans-serif;
}
.rpa-body,
[data-rpa-body] {
  font-family: "Nunito", sans-serif;
}
.rpa-hand,
[data-rpa-hand] {
  font-family: "Caveat", "Nunito", cursive;
}

/* Teaching-color utilities. These intentionally win over stage styling. */
.vowel-sound,
.vowel,
[data-rpa-sound="vowel"] {
  background-color: var(--rpa-vowel) !important;
  border-color: var(--rpa-vowel) !important;
  color: #fff !important;
}

.letter-b,
[data-rpa-letter="b"] {
  background-color: var(--rpa-letter-b) !important;
  border-color: var(--rpa-letter-b) !important;
  color: #fff !important;
}

.letter-d,
[data-rpa-letter="d"] {
  background-color: var(--rpa-letter-d) !important;
  border-color: var(--rpa-letter-d) !important;
  color: var(--rpa-bark) !important;
}

.glued-sound,
[data-rpa-sound="glued"] {
  background-color: var(--rpa-glued) !important;
  border-color: var(--rpa-glued) !important;
  color: var(--rpa-bark) !important;
}

/* Glued sounds are one visual and interactive unit. */
.glued-sound {
  white-space: nowrap;
  letter-spacing: 0 !important;
}

/* Stage accents */
[data-stage="prereader"],
[data-stage-link="prereader"] { --rpa-stage: var(--rpa-stage-prereader); }
[data-stage="beginning"],
[data-stage-link="beginning"] { --rpa-stage: var(--rpa-stage-beginning); }
[data-stage="readtolearn"],
[data-stage-link="readtolearn"] { --rpa-stage: var(--rpa-stage-readtolearn); }
[data-stage="advanced"],
[data-stage-link="advanced"] { --rpa-stage: var(--rpa-stage-advanced); }

/* Mobile contract. Headers must not trap scrolling. */
@media (max-width: 860px) {
  html body .site-header,
  html body header.site-header {
    position: static !important;
    top: auto !important;
    transform: none !important;
  }
}