/* Section page backgrounds — shared token system.
   Each --page-tint is the exact --sl-tint value used by that section's tile
   on home.php (.sl-card[data-section]) and is kept as a fallback color in
   case the section's background image fails to load.
   Add the matching body.section-* class to any page that should carry a
   section's identity — no other markup required. */

body.section-games      { --page-tint: #4A7DFB; --page-bg: url('/img/games_preview/background_games.svg'); } /* blue */
body.section-clips      { --page-tint: #FF8F66; --page-bg: url('/img/grammartube/background_gramtube.svg'); } /* peach */
body.section-lessons    { --page-tint: #7C9A6B; --page-bg: url('/img/lessons/background_lessons.svg'); } /* sage */
body.section-tools      { --page-tint: #E3A825; --page-bg: url('/img/tools/background_tools.svg'); } /* gold */
body.section-worksheets { --page-tint: #E8F8FF; --page-bg: url('/img/worksheets/background_worksheets.svg'); } /* pale blue */
body.section-classes    { --page-tint: #2B4570; --page-bg: url('/img/classes/background_classes.svg'); } /* deep navy — switched from violet (#8B5FE0) 2026-07-11 to read against the shared cream site background. Deliberately NOT matched on home.php's dashboard tile (.sl-card[data-section="classes"]), which intentionally stays violet. */

/* ── Per-section background disabled (2026-07-11) — these pages now use the
   site-wide splash background from base.css instead of a distinct tint/image
   per section. The --page-tint/--page-bg values above are left in place so
   this is a one-block revert: uncomment below to restore per-section colors.

body.section-games,
body.section-clips,
body.section-lessons,
body.section-tools,
body.section-worksheets,
body.section-classes {
  background-color: var(--page-tint);
  background-image: var(--page-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
── */