/* YaadGar brand layer for every web page. Values come from the app
   (src/shared/config/palette.js, typography.js); see DESIGN_SYSTEM.md.
   Linked AFTER each page's own <style>, so it wins on equal specificity. */
:root {
  --paper: #FAFAFA; --card: #FFFFFF; --ink: #18181B; --ink-2: #3F3F46; --ink-3: #71717A;
  --line: #E4E4E7; --brand: #059669; --brand-deep: #0F3B2E; --brand-tint: #ECFDF5;
  --marigold: #D97706; --marigold-tint: #FEF3C7; --danger: #DC2626; --on-brand: #FFFFFF;
  --link: #047857;
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --book: var(--display);
  --body: Roboto, system-ui, "Segoe UI", -apple-system, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #18181B; --card: #232326; --ink: #FAFAFA; --ink-2: #D4D4D8; --ink-3: #A1A1AA;
    --line: #3F3F46; --brand: #34D399; --brand-deep: #0F3B2E; --brand-tint: #12352A;
    --marigold: #F59E0B; --marigold-tint: #3A2B12; --danger: #F87171; --on-brand: #064E3B;
    --link: #34D399;
    color-scheme: dark;
  }
}

body { font-family: var(--body); background: var(--paper); }

/* Serif only for page and section titles and the wordmark, like the app's screen titles.
   Cormorant has a small x-height; font-size-adjust lets each page keep its own sizes. */
h1, h2, .word { font-family: var(--display); font-weight: 700; letter-spacing: -0.005em; font-size-adjust: 0.47; }
.plate h1 { font-size-adjust: none; }
h3, h4, .block h2, .shelf h4, footer nav b { font-family: var(--body); font-weight: 600; letter-spacing: 0; font-size-adjust: none; }
.block h2 { font-size: 19px; }
.stats b, .ladder li::before { font-family: var(--body); }
.word { font-size: 25px; }
.word small { font-family: var(--body); font-size-adjust: none; }

/* Help guides read like the legal pages: one 70ch column, room above each section. */
main.content { max-width: 70ch; }
main.content .section { margin-top: 40px; }
main.content .section h2 { margin-bottom: 10px; }

/* The app's mark, on a white tile like the launcher icon. */
.lm { display: block; width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: #fff url("/logo-mark.png") center / 82% no-repeat; box-shadow: inset 0 0 0 1px var(--line); }