/* Brand colors and fonts shared by the website and the study app. Change them here only. */
:root {
  color-scheme: light dark;
  --brand: #2E6658;
  --brand-deep: #1F4A40;
  --brand-mint: #8CC4B0;
  --cta: #E8A33D;
  --cta-ink: #1E2427;
  --bg: #F6F9F8;
  --surface: #FFFFFF;
  --surface-2: #EEF5F2;
  --ink: #2F3A3F;
  --ink-2: #4F5D63;
  --ink-3: #6E7C80;
  --line: #DCE7E2;
  --primary: var(--brand);
  --primary-ink: #ffffff;
  --primary-soft: #E1EEE9;
  --amber: #8A5A12;
  --amber-soft: #FFF6E6;
  --good: #1D7A4C;
  --good-soft: #DFF2E6;
  --bad: #B3352C;
  --bad-soft: #FBE4E1;
  --flag: #C07F13;
  --footer-bg: #2F3A3F;
  --shadow: 0 1px 2px rgba(31, 74, 64, .06), 0 10px 28px rgba(31, 74, 64, .07);
  --radius: 16px;
  --dom-a: #0f766e; --dom-b: #59831f; --dom-c: #b45309;
  --dom-d: #2b6cb0; --dom-e: #96690f; --dom-f: #b23a5b;
  --dom-g: #0e7490; --dom-h: #9a3412; --dom-i: #3f6212;
  --font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand: #5FB39A; --brand-deep: #8CC4B0; --brand-mint: #8CC4B0;
    --bg: #10181A; --surface: #172124; --surface-2: #1F2C30;
    --ink: #E8EEEC; --ink-2: #AEBBB7; --ink-3: #85948F; --line: #2E3D42;
    --primary: #5FB39A; --primary-ink: #0B1A15; --primary-soft: #1F3D34;
    --amber: #E8B565; --amber-soft: #3A2E17;
    --good: #63C892; --good-soft: #193A28; --bad: #F08A80; --bad-soft: #43231F; --flag: #E2A83E;
    --footer-bg: #0B1113;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
    --dom-a: #2dd4bf; --dom-b: #a3c95e; --dom-c: #f0a04b;
    --dom-d: #6cb2f5; --dom-e: #d9b45c; --dom-f: #f07d9d;
    --dom-g: #38b6d3; --dom-h: #f08a5c; --dom-i: #9dc46b;
  }
}