/* The colour roles of docs/design.md (D-049, D-050), light and dark: the one place they are set. The web app imports this
   file (apps/web/src/theme.css) and the website copies it into its pages (apps/website/build.py); the apps keep a copy in
   apps/mobile/composeApp/src/Theme.kt, and apps/website/tests/test_colours.py checks that it matches. */
:root {
  --background: #fbf9f4;
  --surface: #fffefb;
  --text: #2b2119;
  --muted-text: #6f685f;
  --accent: #915006;
  --mark: #fec805;       /* the brand's yellow: the stroke under a word and the fill of a button, never text */
  --mark-deep: #f7b500;  /* the mark where the pen lands */
  --mark-light: #ffd650; /* the mark where it lifts */
  --on-mark: #2b2119;
  --right: #2e7d4f;
  --wrong: #b3261e;
  --line: #e5e3dd;
  /* the layer over the feed (D-036): a dark layer the feed shows through, its text in cream */
  --overlay: #2b2119ad;
  --overlay-text: #fbf9f4;
  --overlay-accent: #ffd667;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #000000;
    --surface: #1d1c1a;
    --text: #f2eee6;
    --muted-text: #bbb7af;
    --accent: #ffd667;
    --mark: #fec805;
    --mark-deep: #f7b500;
    --mark-light: #ffd650;
    --on-mark: #2b2119;
    --right: #52ce8a;
    --wrong: #f3a39b;
    --line: #3a3836;
    --overlay: #1d1c1a; /* in dark mode the layer covers the feed, a step lighter, as iOS raises a layer */
    --overlay-text: #f2eee6;
    --overlay-accent: #ffd667;
  }
}