/*
 * Kids' theme: SCM_KIDS_PAGES only (civics-4-kids .c4k, graffiti-free-city .gfc, family-youth-safety .fys). Loads after core.css.
 * A separate design system (DESIGN.md §1.1): it reuses core token NAMES with other values,
 * so every value here is scoped to the two kids roots, never :root.
 * Component tweaks use :where() so they beat core.css by load order only, and the page's
 * own class (class="scm-c-btn c4k-btn") still wins after it.
 */

/* Tokens */
.c4k, .gfc, .fys {
  color: #1a2236;
  --cream: #FFF8EC;
  --c-coral: #FF6B4A;
  --c-teal: #18B6AE;
  --c-violet: #7C5CFC;
  --c-green: #2FB673;
  --c-pink: #FF5DA2;
  --c-sky: #2E9BF0;
}

/* Display face */
.c4k h1, .c4k h2, .c4k h3,
.gfc h1, .gfc h2, .gfc h3,
.fys h1, .fys h2, .fys h3 { font-family: 'Fredoka', 'Roboto', sans-serif; }

/* Eyebrows stay Roboto, tracked tighter than core */
:where(.c4k, .gfc, .fys) .scm-c-eyebrow,
:where(.c4k, .gfc, .fys) .scm-c-hero__eyebrow { letter-spacing: 2px; font-family: 'Roboto', sans-serif; }

/* Buttons: Fredoka, sentence case, quicker */
:where(.c4k, .gfc, .fys) .scm-c-btn {
  padding: 15px 32px;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.05rem;
  letter-spacing: normal; text-transform: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
:where(.c4k, .gfc, .fys) .scm-c-btn--gold:hover { box-shadow: 0 16px 36px -8px rgba(244,180,0,.8); }