/* Every colour, radius, shadow, font, size and space lives here. app.css only reads these tokens.
   To change the main colour, change --bar and --accent in a theme below. Nothing else needs to move.
   To add a theme: copy a theme block below, change its values, and add it to THEMES in account.py.
   A test checks that each theme defines the same tokens. */
@font-face {
  font-family: "Overpass";
  src: url("/static/fonts/overpass.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --sans: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --page: 1040px;
  --control-height: 42px;
  --touch-height: 44px;
  --text-xs: 13px;
  --text-sm: 14px;
  --text-md: 15px;
  --text-base: 16px;
  --text-lg: 17px;
  --text-title: 20px;
  --text-section: 21px;
  --text-fit: 34px;
  --text-fit-row: 22px;
  --text-fit-large: 64px;
  --text-display: 44px;
  --text-display-small: 32px;
  --text-empty: 28px;
  --text-logo: 11px;
  --text-fit-phone: 30px;
  --text-fit-phone-large: 52px;
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 36px;
  --space-3xl: 64px;
  --radius: 4px;
  --radius-round: 50%;
  --rule: 3px;
  --bar-height: 58px;
  --tabs-height: 60px;
}

/* Light is the default, for signed-out pages and anyone who hasn't chosen. */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bar: #2a22c4;
  --on-bar: #ffffff;
  --on-bar-soft: #dcdaf7;
  --mark: #ffc20e;
  --accent: #2a22c4;
  --on-accent: #ffffff;
  --accent-tint: #eeedfb;
  --signal: #ffc20e;
  --on-signal: #14171a;
  --signal-tint: #fff4cc;
  --danger: #b3261e;
  --danger-tint: #f7dfdd;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-raised: #f4f5f2;
  --line: #d8dbd6;
  --line-strong: #6b7278;
  --ink: #14171a;
  --ink-soft: #2c3136;
  --ink-muted: #4a5258;
  --placeholder: #5f676d;
  --shadow: 0 6px 16px rgb(20 23 26 / 18%);
  --logo-tile: #ffffff;
  --logo-ink: #2c3136;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bar: #2a22c4;
  --on-bar: #ffffff;
  --on-bar-soft: #dcdaf7;
  --mark: #ffc20e;
  --accent: #aeb0ff;
  --on-accent: #14171a;
  --accent-tint: #1f2038;
  --signal: #ffc20e;
  --on-signal: #14171a;
  --signal-tint: #3a3010;
  --danger: #ff8a80;
  --danger-tint: #3f1d1a;
  --bg: #111318;
  --surface: #111318;
  --surface-raised: #1b1e25;
  --line: #2f333c;
  --line-strong: #8a919c;
  --ink: #f4f5f7;
  --ink-soft: #d9dce2;
  --ink-muted: #a9afb9;
  --placeholder: #8f96a1;
  --shadow: 0 6px 16px rgb(0 0 0 / 50%);
  --logo-tile: #f4f5f7;
  --logo-ink: #2c3136;
}

/* Warm and low-glare, for long reading. */
:root[data-theme="paper"] {
  color-scheme: light;
  --bar: #2a22c4;
  --on-bar: #ffffff;
  --on-bar-soft: #dcdaf7;
  --mark: #ffc20e;
  --accent: #2a22c4;
  --on-accent: #ffffff;
  --accent-tint: #e6e2ea;
  --signal: #ffc20e;
  --on-signal: #14171a;
  --signal-tint: #f7e8b4;
  --danger: #a12a20;
  --danger-tint: #f0d9cf;
  --bg: #f5efe3;
  --surface: #f5efe3;
  --surface-raised: #ebe3d2;
  --line: #d6ccb8;
  --line-strong: #6e6350;
  --ink: #221d15;
  --ink-soft: #3b3427;
  --ink-muted: #574e3d;
  --placeholder: #655b48;
  --shadow: 0 6px 16px rgb(34 29 21 / 18%);
  --logo-tile: #ffffff;
  --logo-ink: #3b3427;
}