/**
 * MooseU design tokens — single source of truth for the theme.
 *
 * Aesthetic direction: educational warmth. Hand-drawn whiteboard
 * accents (Patrick Hand + Kalam), Cooper-Black branded display, deep
 * navy body type, moose-yellow + moose-blue brand surfaces. The site
 * is a nonprofit lodge-officer training portal — should feel like a
 * thoughtful classroom, not a corporate dashboard.
 *
 * Usage rules:
 *   - All colors come from --mu-* / --moose-* variables.
 *   - All spacing comes from --mu-space-* (multiples of 4px).
 *   - Component CSS imports tokens; no raw hex codes outside this file.
 *   - Typography uses --mu-font-display / --mu-font-script / --mu-font-body.
 */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Source+Sans+3:wght@400;500;600;700;800&display=swap');

:root {
  /* ─── Brand palette ─────────────────────────────────────────── */
  --mu-navy:        #1e3a5f;       /* primary text + headings */
  --mu-navy-deep:   #0f2347;       /* hover/pressed states */
  --mu-blue:        #2673c4;       /* primary action, links */
  --mu-blue-light:  #5999d9;       /* hover, active-trail */
  --mu-yellow:      #f6c244;       /* warm accent, highlight cards */
  --mu-yellow-soft: #fffbe5;       /* card surface tint */
  --mu-orange:      #f78d3f;       /* secondary accent */
  --mu-teal:        #37b6b2;       /* tertiary accent */

  /* ─── Surfaces ──────────────────────────────────────────────── */
  --mu-bg-app:      #f5f9ff;       /* outer page bg, header band */
  --mu-bg-paper:    #ffffff;       /* card surfaces */
  --mu-bg-soft:     #f3f7fc;       /* subtle alternate surface */
  --mu-bg-divider:  rgba(30, 58, 95, 0.10);
  --mu-bg-hover:    rgba(38, 115, 196, 0.06);

  /* Aliases for legacy CSS that uses --moose-* */
  --moose-blue:        var(--mu-blue);
  --moose-blue-light:  var(--mu-blue-light);
  --moose-yellow:      var(--mu-yellow);
  --moose-orange:      var(--mu-orange);
  --moose-teal:        var(--mu-teal);
  --moose-neutral:     var(--mu-bg-paper);

  /* ─── Type scale ────────────────────────────────────────────── */
  /* 2026 modernisation: Sora (clean geometric sans) carries ALL heading
     duty. --mu-font-script used to be Patrick Hand (handwritten) — every
     rule that referenced it now resolves to Sora too, which retires the
     cartoonish display work site-wide without touching component CSS. */
  --mu-font-display: "Sora", "Source Sans 3", system-ui, sans-serif;
  --mu-font-script:  "Sora", "Source Sans 3", system-ui, sans-serif;
  --mu-font-body:    "Source Sans 3", "Segoe UI", "Roboto", system-ui, sans-serif;

  --mu-text-xs:   0.78rem;
  --mu-text-sm:   0.92rem;
  --mu-text-md:   1rem;
  --mu-text-lg:   1.15rem;
  --mu-text-xl:   1.4rem;
  --mu-text-2xl:  1.85rem;
  --mu-text-3xl:  2.4rem;
  --mu-text-4xl:  clamp(2.4rem, 4vw, 3.4rem);

  --mu-leading-tight:  1.2;
  --mu-leading-snug:   1.4;
  --mu-leading-normal: 1.6;

  /* ─── Spacing (4px scale) ───────────────────────────────────── */
  --mu-space-1:  0.25rem;   /*  4px */
  --mu-space-2:  0.5rem;    /*  8px */
  --mu-space-3:  0.75rem;   /* 12px */
  --mu-space-4:  1rem;      /* 16px */
  --mu-space-5:  1.5rem;    /* 24px */
  --mu-space-6:  2rem;      /* 32px */
  --mu-space-7:  3rem;      /* 48px */
  --mu-space-8:  4rem;      /* 64px */

  /* ─── Radii ─────────────────────────────────────────────────── */
  --mu-radius-sm:  0.375rem;
  --mu-radius-md:  0.6rem;
  --mu-radius-lg:  0.85rem;
  --mu-radius-xl:  1.25rem;
  --mu-radius-pill: 999px;

  /* ─── Shadows ───────────────────────────────────────────────── */
  --mu-shadow-card:    0 4px 16px rgba(38, 115, 196, 0.10);
  --mu-shadow-lift:    0 8px 24px rgba(38, 115, 196, 0.18);
  --mu-shadow-deep:    0 12px 32px rgba(15, 35, 71, 0.18);
  --mu-shadow-inset-paper:
    inset 0 0 0 2px rgba(30, 58, 95, 0.20),
    inset 0 0 24px 8px rgba(30, 58, 95, 0.10);

  /* ─── Motion ────────────────────────────────────────────────── */
  --mu-duration-fast: 0.12s;
  --mu-duration-mid:  0.22s;
  --mu-duration-slow: 0.4s;
  --mu-easing:        cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ─── Container width ──────────────────────────────────────── */
  --mu-container-max: 1280px;
  --mu-container-pad: 1.5rem;
}

/* ─── Global resets shaped by tokens ─────────────────────────── */
body {
  font-family: var(--mu-font-body);
  color: var(--mu-navy);
  line-height: var(--mu-leading-normal);
  background: var(--mu-bg-app);
}

h1, h2, h3, h4 {
  font-family: var(--mu-font-display);
  color: var(--mu-navy);
  line-height: var(--mu-leading-tight);
}

a {
  color: var(--mu-blue);
  text-decoration: none;
  transition: color var(--mu-duration-fast) var(--mu-easing);
}

a:hover {
  color: var(--mu-navy-deep);
}

/* ─── Reusable utility classes ──────────────────────────────── */
.mu-card {
  background: var(--mu-bg-paper);
  border: 1px solid var(--mu-bg-divider);
  border-radius: var(--mu-radius-lg);
  padding: var(--mu-space-5);
  box-shadow: var(--mu-shadow-card);
  transition: transform var(--mu-duration-mid) var(--mu-easing),
              box-shadow var(--mu-duration-mid) var(--mu-easing);
}

.mu-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--mu-shadow-lift);
}

.mu-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--mu-space-2);
  padding: var(--mu-space-2) var(--mu-space-4);
  background: var(--mu-blue);
  color: #fff;
  border-radius: var(--mu-radius-pill);
  font-weight: 700;
  font-size: var(--mu-text-sm);
  text-decoration: none !important;
  transition: background var(--mu-duration-fast) var(--mu-easing);
}

.mu-pill:hover {
  background: var(--mu-navy-deep);
  color: #fff;
}

.mu-container {
  max-width: var(--mu-container-max);
  margin: 0 auto;
  padding-inline: var(--mu-container-pad);
}

/* Skip-link / a11y helpers */
.mu-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Subtle paper-grain texture for decorative surfaces */
.mu-paper-grain {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(246, 194, 68, 0.04) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(38, 115, 196, 0.04) 0, transparent 45%);
}

/* ─── Reduced-motion respect ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}