/* The one palette for the landing page and the app. --on-brand is text on --brand
   fills: white in light mode, a dark ink in dark mode (white on #56d4ba is 1.8:1).
   --accent is for fills and icons; accent-colored text uses --accent-strong on the
   page surfaces and --accent-on-navy on --navy, which turns light in dark mode.
   Every accent text pairing is at least 4.5:1. */
:root { color-scheme: light dark; --bg:#f6faf9; --surface:#fff; --surface-2:#eaf4f1; --ink:#102925; --muted:#526a65; --line:#cbded9; --brand:#087a68; --brand-strong:#045f52; --brand-soft:#dff3ed; --on-brand:#fff; --accent:#e96d4c; --accent-strong:#b8462a; --accent-on-navy:#ffb59f; --accent-soft:#fff0eb; --navy:#123d4a; }
@media (prefers-color-scheme: dark) { :root { --bg:#091613; --surface:#10231f; --surface-2:#17322c; --ink:#effaf6; --muted:#a8c0ba; --line:#294940; --brand:#56d4ba; --brand-strong:#92ead8; --brand-soft:#173a33; --on-brand:#091613; --accent:#ff9b7e; --accent-strong:#ffb59f; --accent-on-navy:#a53f24; --accent-soft:#3a241e; --navy:#c8edf5; } }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"IBM Plex Sans",system-ui,sans-serif; line-height:1.55; }
main { width:min(calc(100% - 40px),760px); margin:40px auto; }
a { color:var(--brand-strong); }