/* Trekit theme. Token values come from design/theme.json (ThemeTokensTests keeps them equal).
   The page follows the system appearance; <html data-theme="light|dark"> forces one. */
:root {
  color-scheme: light dark;
  --base: #F6F4EE;
  --surface: #FCFBF7;
  --overlay: #ECE8DE;
  --text: #1F2D2F;
  --subtle: #596A6A;
  --accent: #0F766E;
  --on-accent: #FCFBF7;
  --alert: #B5412F;
  --flash: #8A5A00;
  --line: #DDD8CB;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --base: #11191C;
    --surface: #172226;
    --overlay: #1F2E33;
    --text: #E6EEEC;
    --subtle: #8DA3A3;
    --accent: #5CC4B0;
    --on-accent: #11191C;
    --alert: #F0786A;
    --flash: #E8B04B;
    --line: #294048;
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --base: #11191C;
  --surface: #172226;
  --overlay: #1F2E33;
  --text: #E6EEEC;
  --subtle: #8DA3A3;
  --accent: #5CC4B0;
  --on-accent: #11191C;
  --alert: #F0786A;
  --flash: #E8B04B;
  --line: #294048;
}

body { font: 17px/1.55 system-ui, -apple-system, sans-serif; max-width: 40rem; margin: 0 auto; padding: 4rem 1rem 2rem; background: var(--base); color: var(--text); }
h1 { font-size: 2rem; margin: 0 0 1rem; }
a { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
code { background: var(--overlay); padding: .1em .35em; border-radius: .25rem; font-size: .92em; }
.button { display: inline-block; padding: .6rem 1.2rem; border-radius: .5rem; background: var(--accent); color: var(--on-accent); text-decoration: none; font-weight: 600; }
footer { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--subtle); }