/* Subtext design tokens — the ONE source for colour, type and shape on the web.
   The practice space loads this file; the marketing site loads an identical
   copy, kept in step by scripts/sync-tokens.sh (which also refuses to deploy a
   differing copy). iOS mirrors the light/dark values in
   Sources/Core/Design/Theme.swift.

   Looks (design F, Oct 2026): with no data-theme the page follows the device
   (light or dark). The practice space can also set data-theme="light" (Paper),
   "dark" or "contrast" (High contrast) from the person's own choice. Every
   text pair clears 4.5:1 and every control edge 3:1 in all four; the QC
   script checks it. Change a value here, run the sync, and both sites move. */

/* Atkinson Hyperlegible, by the Braille Institute: letters drawn to be told
   apart (I l 1, O 0). Self-hosted, Latin subset, SIL Open Font License
   (fonts/Atkinson-Hyperlegible-OFL.txt). */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Paper: warm paper, warm ink, one muted eucalyptus accent. */
  --bg:#faf9f6; --surface:#fdfcf9; --surface2:#f2f0ea; --chip:#f2f0ea;
  --ink:#211f1a; --ink2:#5a574e;
  /* ink3 carries real text, so it clears 4.5:1 on bg, surface and surface2. */
  --ink3:#6d6a61; --line:#e5e2d8;
  /* Edges that must be seen (inputs, segmented controls): 3:1 on bg. */
  --line-strong:#8c887d;
  --accent:#2e6b62; --accent2:#24574f; --accent-ink:#ffffff; --link:#2e6b62;
  --wash:rgba(46,107,98,.09); --danger:#b4463c;
  --bubble-them:#eceae2; --bubble-me:#2e6b62;
  --media-bg:#1d1c18; --scrim:rgba(33,31,26,.5);
  --amber-wash:rgba(138,90,18,.13); --amber-ink:#7a5010;
  --focus:#2e6b62;
  /* Older name the marketing site used for the hover accent. */
  --accent-deep:var(--accent2);

  /* Type: Charter for headings and reading; Atkinson Hyperlegible for
     everything you click, scan or type. */
  --font-serif:Charter, "Bitstream Charter", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans:"Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Shape. */
  --radius-btn:12px; --radius-card:16px; --radius-chip:8px;
  color-scheme:light;
}

/* Dark: the device asks for it and the person hasn't chosen a look, or they chose Dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#1b1c1e; --surface:#242528; --surface2:#2d2e32; --chip:#2d2e32;
    --ink:#e6e4de; --ink2:#c8c5bd; --ink3:#a9a69e; --line:#3a3b40; --line-strong:#7d7e84;
    --accent:#9ccfc4; --accent2:#b9ded6; --accent-ink:#14201d; --link:#9ccfc4;
    --wash:rgba(156,207,196,.13); --danger:#e88a7e;
    --bubble-them:#2d2e32; --bubble-me:#9ccfc4;
    --media-bg:#0e0e0c; --scrim:rgba(0,0,0,.6);
    --amber-wash:rgba(217,164,65,.15); --amber-ink:#e0b25a;
    --focus:#9ccfc4;
    color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --bg:#1b1c1e; --surface:#242528; --surface2:#2d2e32; --chip:#2d2e32;
  --ink:#e6e4de; --ink2:#c8c5bd; --ink3:#a9a69e; --line:#3a3b40; --line-strong:#7d7e84;
  --accent:#9ccfc4; --accent2:#b9ded6; --accent-ink:#14201d; --link:#9ccfc4;
  --wash:rgba(156,207,196,.13); --danger:#e88a7e;
  --bubble-them:#2d2e32; --bubble-me:#9ccfc4;
  --media-bg:#0e0e0c; --scrim:rgba(0,0,0,.6);
  --amber-wash:rgba(217,164,65,.15); --amber-ink:#e0b25a;
  --focus:#9ccfc4;
  color-scheme:dark;
}
/* High contrast: white page, black text and lines, a deep accent. */
:root[data-theme="contrast"] {
  --bg:#ffffff; --surface:#ffffff; --surface2:#f1f1f1; --chip:#ffffff;
  --ink:#000000; --ink2:#1f1f1f; --ink3:#333333; --line:#000000; --line-strong:#000000;
  --accent:#004d44; --accent2:#00352f; --accent-ink:#ffffff; --link:#004d44;
  --wash:#e3efec; --danger:#8f1d12;
  --bubble-them:#ffffff; --bubble-me:#004d44;
  --media-bg:#000000; --scrim:rgba(0,0,0,.7);
  --amber-wash:#fff1cc; --amber-ink:#4d3200;
  --focus:#000000;
  color-scheme:light;
}