/* Steady Hare web brand: colour tokens, display face and header, shared by the dashboard, the authoring app and the Courses pages (brand guide sections 9 and 10).
   Fraunces (SIL OFL 1.1, licence beside this file) is self-hosted; there is no third-party font request. The size-adjusted Georgia fallback keeps the layout steady before it loads. */
@font-face { font-family: "Fraunces Display"; src: url("/brand/fraunces-display.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); size-adjust: 98%; ascent-override: 92%; descent-override: 24%; }
:root {
  color-scheme: light dark;
  --sh-terracotta: #B5542D; --sh-terracotta-light: #E07A4F; --sh-terracotta-deep: #8F3F20;
  --sh-cream: #FAF7F2; --sh-white: #FFFFFF; --sh-ink: #22201C; --sh-stone: #6B655C; --sh-sand: #E6E0D6;
  --sh-night: #171512; --sh-night-surface: #211E1A; --sh-cream-dark: #EFE9DF; --sh-stone-dark: #A69E92; --sh-sand-dark: #35302A;
  --font-display: "Fraunces Display", "Fraunces Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* The pages' working names, mapped onto the brand roles. */
  --bg: var(--sh-cream); --card: var(--sh-white); --text: var(--sh-ink); --muted: var(--sh-stone); --line: var(--sh-sand);
  --accent: var(--sh-terracotta); --accent-text: var(--sh-cream);
  --yes: #2E6347; --yes-bg: #E4F0E8; --no: #9E2B2B; --no-bg: #F8E6E3; --none-bg: #F1EDE5;
  --warn: #6B4A00; --warn-bg: #F6E7C0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--sh-night); --card: var(--sh-night-surface); --text: var(--sh-cream-dark); --muted: var(--sh-stone-dark); --line: var(--sh-sand-dark);
    --accent: var(--sh-terracotta-light); --accent-text: var(--sh-night);
    --yes: #6FB08B; --yes-bg: #1F3328; --no: #EE8A80; --no-bg: #3A1E1B; --none-bg: #35302A;
    --warn: #E3B24A; --warn-bg: #3A2E12;
  }
}
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; font-optical-sizing: auto; }
.brand { display: flex; align-items: center; gap: 12px; margin: 0; font-weight: 600; }
.brand picture, .brand img { display: block; }
.brand img { height: 32px; width: auto; }
.brand .where { color: var(--muted); font-weight: 500; }
.brand a { display: flex; align-items: center; gap: 12px; }