/* Source Serif 4 (SIL Open Font License, see web/fonts/source-serif-4/), bold only, served from this site rather than a font host. Used for course titles. Inter Bold and Nunito Bold (also OFL, in their own folders) are the other two title styles. */
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(/fonts/source-serif-4/source-serif-4-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(/fonts/source-serif-4/source-serif-4-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(/fonts/inter/inter-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(/fonts/inter/inter-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(/fonts/nunito/nunito-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(/fonts/nunito/nunito-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --bg: #f6f8fc;
  --surface: #ffffff;
  --surface-hover: #f0f2f6;
  --border: #e2e5eb;
  --text: #1f2430;
  --muted: #6b7280;
  --accent: #1b3f9e;
  --accent-hover: #002166;
  --pill-bg: #e8eefb;
  /* The logo's gold: for small highlights only (never text on white) */
  --gold: #fdc20f;
  --danger: #b91c1c;
  --danger-bg: #fef2f2;
  --success: #15803d;
  --success-bg: #f0fdf4;
  --warning: #92400e;
  --warning-bg: #fef3c7;
  /* Grid cell background palette (rich text). Each name is a light/dark PAIR:
     a pale tint here, a deep shade of the same hue in the dark theme below,
     so text keeps its contrast whichever theme is active (>= 8:1 against
     --text in both - see dev-tests/cell-palette-test.mjs, which enforces
     this along with the light/dark/hue pairing). The names are a closed
     list shared with the server (embed_attrs.rs::CELL_BACKGROUNDS). */
  --cell-bg-yellow: #fef9c3;
  --cell-bg-orange: #ffedd5;
  --cell-bg-green: #dcfce7;
  --cell-bg-blue: #dbeafe;
  --cell-bg-purple: #ede9fe;
  --cell-bg-pink: #fce7f3;
  --cell-bg-gray: #f3f4f6;
  /* Standout-block icon badges: fixed (not theme-paired) saturated colours,
     a separate palette from --cell-bg-* above - a small decorative accent
     badge doesn't need to shift hue with the theme the way a full block of
     body text does. Every one of these is verified (dev-tests/cell-palette-test.mjs)
     to give at least 3:1 contrast against AT LEAST ONE of --icon-fg-dark /
     --icon-fg-light below - not both. A light, vivid yellow (or any colour
     naturally suited to one end) doesn't need to be muddied just to also
     satisfy the other; the icon-colour swatches stay offered regardless, and
     it's on whoever's editing to pick the one that actually reads well - the
     same way nothing stops someone pairing red text on a red background
     elsewhere. Deliberately NOT redefined in the dark-theme block further
     down: same value in both themes. */
  --icon-badge-bg-red: #dc2626;
  --icon-badge-bg-orange: #ea580c;
  --icon-badge-bg-yellow: #facc15;
  --icon-badge-bg-green: #16a34a;
  --icon-badge-bg-blue: #2563eb;
  --icon-badge-bg-purple: #a237f0;
  --icon-badge-bg-pink: #db2777;
  --icon-badge-bg-gray: #838383;
  --icon-fg-dark: #1f2430;
  --icon-fg-light: #ffffff;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0b1122;
  --surface: #121a30;
  --surface-hover: #1a2440;
  --border: #25304d;
  --text: #e7e9ee;
  --muted: #9aa3b2;
  --accent: #6b90f0;
  --accent-hover: #5078dc;
  --pill-bg: #182544;
  --gold: #fdc20f;
  --danger: #f87171;
  --danger-bg: #3a1a1a;
  --success: #4ade80;
  --success-bg: #12291b;
  --warning: #fbbf24;
  --warning-bg: #3a2c0e;
  --cell-bg-yellow: #4a4210;
  --cell-bg-orange: #4d3016;
  --cell-bg-green: #14432a;
  --cell-bg-blue: #1b3a63;
  --cell-bg-purple: #37275f;
  --cell-bg-pink: #5a1f42;
  --cell-bg-gray: #374151;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  transition: background-color 0.15s ease, color 0.15s ease;
}

html { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

/* The app fills what is left of the screen, so the footer below it is pushed to the bottom of a short page rather than sitting under the content. */
app-shell { display: block; flex: 1 0 auto; }

/* The site footer lives here, on the body, not inside any component. */
.site-footer { flex: none; padding: 1rem 1.4rem; border-top: 1px solid var(--border); background: var(--surface); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; max-width: 980px; margin: 0 auto; }

a { color: var(--accent); }