/**
 * Shared by index.html and by the pages scripts/generate-legal.js writes.
 *
 * It exists so the two cannot drift: the legal pages used to carry their own
 * copy of the colours and ended up looking like a different product. Anything
 * specific to one page stays in that page; everything below is common ground.
 */

/* The app's two families, served from this domain rather than a font CDN —
   same look, and no third party the Privacy Policy would have to name.
   Both are SIL Open Font License; the licences ship in /fonts. */
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/Newsreader-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

/* Tokens mirror src/theme/tokens.ts so the site and the app read as one
   product. Light is the base; dark redefines only what changes. */
:root {
  --bg: #FAF8F4;
  --surface: #FFFFFF;
  --surface-quiet: #F4F1EA;
  --ink: #1B1A17;
  --ink-muted: #6C6A63;
  --border: #E6E2D9;
  --border-soft: #F2EFE8;
  --accent: #1F6B5E;
  --accent-soft: #ECF2F0;
  --homework: #8A6416;
  --homework-soft: #F6EFE1;
  --track: #F0EDE5;
  --card-shadow: 0 1px 2px rgba(27, 26, 23, 0.04), 0 10px 30px rgba(27, 26, 23, 0.06);

  --display: 'Newsreader', Georgia, 'Times New Roman', 'Noto Serif', serif;
  --body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12140F;
    --surface: #191C16;
    --surface-quiet: #1E211A;
    --ink: #FFFFFF;
    --ink-muted: rgba(255, 255, 255, 0.62);
    --border: rgba(255, 255, 255, 0.12);
    --border-soft: rgba(255, 255, 255, 0.07);
    --accent: #8FD3C3;
    --accent-soft: rgba(143, 211, 195, 0.12);
    --homework: #E4C481;
    --homework-soft: rgba(228, 196, 129, 0.12);
    --track: rgba(255, 255, 255, 0.09);
    --card-shadow: none;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { text-decoration: none; }
/* Never remove the focus ring — it is the only affordance a keyboard user has. */
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }
/* Long-form reading wants a narrower measure than a landing page. */
.wrap.narrow { max-width: 46rem; }

/* ---------- masthead ---------- */

.site-header { padding: 2.25rem 0 0; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.brand svg { display: block; color: var(--accent); }

/* ---------- footer ---------- */

footer {
  margin-top: 5rem;
  border-top: 1px solid var(--border);
  padding: 2.5rem 0 3.5rem;
  color: var(--ink-muted);
  font-size: 0.95rem;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 2rem;
  align-items: flex-start;
  justify-content: space-between;
}
.footer-brand { max-width: 20rem; }
.footer-brand p { margin: 0.6rem 0 0; font-size: 0.92rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
footer nav a { font-weight: 600; text-decoration: none; }
footer nav a:hover { text-decoration: underline; }
/* Small print, not decoration — it keeps the footer's contrast. */
.fine {
  margin: 2.25rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
  font-size: 0.86rem;
}

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