/* Site-wide styles for Reasype: fonts (self-hosted) and the shared tokens. App-specific rules are in app/app.css. */
@font-face{font-family:"Bricolage Grotesque";font-weight:500;font-display:swap;src:url(assets/fonts/bricolage-grotesque-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:700;font-display:swap;src:url(assets/fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:400;font-display:swap;src:url(assets/fonts/source-sans-3-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:600;font-display:swap;src:url(assets/fonts/source-sans-3-latin-600-normal.woff2) format("woff2")}

/* BEGIN shared:tokens — generated from shared/web/tokens.css by tools/sync_shared_web.py; do not edit here */
/* Shared design tokens — one source for ETT, ETG and ESS (see tools/sync_shared_web.py).
   Edit THIS file, then run `python3 tools/sync_shared_web.py`; never edit the
   copies between the BEGIN/END markers in each site's styles.css.

   Sites keep their own extras AFTER the markers (ETG's accent pair, the hero
   band, --radius). The accent here is the ETT/ESS red: #DA070E on paper,
   #E02C32 on ink, sampled from the app icon so white text on it and the red as
   text both clear 4.5:1 against its own ground. */

:root {
  color-scheme: dark;

  --ground: #0b0b0c;
  --surface: #141416;
  --surface-2: #1e1e21;
  --rim: #2e2e33;

  --ink: #f5f2ec;
  --ink-soft: #afaaa2;
  --ink-faint: #837d75;

  --accent: #e02c32;
  --accent-ink: #ffffff;
  --accent-wash: rgba(224, 44, 50, 0.16);
  --good: #5fc793;

  --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 62ch;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ground: #faf8f5;
    --surface: #ffffff;
    --surface-2: #f0ede7;
    --rim: #dfd9cf;
    --ink: #14120f;
    --ink-soft: #55504a;
    --ink-faint: #7a746c;
    --accent: #da070e;
    --accent-ink: #ffffff;
    --accent-wash: rgba(218, 7, 14, 0.1);
    --good: #1c7a51;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --ground: #faf8f5;
  --surface: #ffffff;
  --surface-2: #f0ede7;
  --rim: #dfd9cf;
  --ink: #14120f;
  --ink-soft: #55504a;
  --ink-faint: #7a746c;
  --accent: #da070e;
  --accent-ink: #ffffff;
  --accent-wash: rgba(218, 7, 14, 0.1);
  --good: #1c7a51;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0b0b0c;
  --surface: #141416;
  --surface-2: #1e1e21;
  --rim: #2e2e33;
  --ink: #f5f2ec;
  --ink-soft: #afaaa2;
  --ink-faint: #837d75;
  --accent: #e02c32;
  --accent-ink: #ffffff;
  --accent-wash: rgba(224, 44, 50, 0.16);
  --good: #5fc793;
}
/* END shared:tokens */