/* Talking Tactile design tokens: the one canonical copy, used by Author and Explore and copied
   byte for byte by the project website. Plain CSS custom properties and @font-face only, so
   it works on its own in any page. Taken from the landing page's tokens (talking-tactile.html),
   with the app's status colors added. Every text and background pair is measured for WCAG AA
   in docs/DESIGN.md (apps/web/scripts/contrast.ts reads this file).

   Theme: light by default, dark when the system asks for it (prefers-color-scheme). A page may
   pin one with data-theme="light" or data-theme="dark" on <html>.

   Fonts are self-hosted (SIL OFL 1.1, texts in /fonts/), so no page using this file asks
   another host for anything. The files must be served at /fonts/ next to the page's root. */

@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/literata-latin-opsz-normal.woff2") format("woff2-variations"),
    url("/fonts/literata-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2-variations"),
    url("/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Shared by both themes. */
:root {
  --f-sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-serif: "Literata", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --r-pill: 999px;
  --r-slab: 30px;
  --r-panel: 24px;
  --r-item: 14px;
  --wrap: 1120px;

  --target: 44px; /* the smallest touch target */
  --target-lg: 56px; /* Explore's buttons */
  --focus-width: 3px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
}

/* Light: paper. */
:root {
  color-scheme: light;
  --mode: light;
  --bg: #e7e1d1;
  --grout: #e7e1d1;
  --tile-lift: 0.32;
  --tshadow: 0 1px 18px rgba(231, 225, 209, 0.9);
  --menu-fill: rgba(244, 239, 226, 0.9);
  --pool: 0.9;
  --veil: 231, 225, 209;

  --text: #1b1912;
  --text-2: rgba(27, 25, 18, 0.74);
  --accent: #6b5627; /* deep brass, readable on paper */
  --accent-ink: #fbf7ec;
  --focus: #2f5d8a;

  --glass-fill: rgba(250, 246, 236, 0.56);
  --glass-fill-2: rgba(250, 246, 236, 0.3);
  --glass-edge: rgba(27, 25, 18, 0.12);
  --glass-rim-a: rgba(255, 255, 255, 0.95);
  --glass-rim-b: rgba(27, 25, 18, 0.1);
  --glass-sheen: rgba(255, 255, 255, 0.55);
  --glass-shadow: 0 24px 60px rgba(70, 56, 30, 0.18), 0 2px 6px rgba(70, 56, 30, 0.1);
  --hair: rgba(27, 25, 18, 0.14);

  /* The glass fill composited over --bg: the solid fill when transparency is reduced. */
  --surface: #f2ede0;
  /* The edge of a field or a pending step: 3:1 or more against --bg and the glass. */
  --field-edge: rgba(27, 25, 18, 0.55);

  /* Status. Each is always paired with words or a shape, never used alone. */
  --ok: #2e6533;
  --warn: #7a4a00;
  --danger: #9a2a1c;
  --info: #2f5d8a;
}

/* Dark: the night stage. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --mode: dark;
    --bg: #000000;
    --grout: #000000;
    --tile-lift: 0;
    --tshadow: 0 2px 28px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.45);
    --menu-fill: rgba(14, 13, 10, 0.86);
    --pool: 0.74;
    --veil: 0, 0, 0;

    --text: #ece4cf;
    --text-2: rgba(236, 228, 207, 0.76);
    --accent: #c9b27c;
    --accent-ink: #17140c;
    --focus: #e8d7a6;

    --glass-fill: rgba(26, 24, 18, 0.42);
    --glass-fill-2: rgba(60, 56, 44, 0.18);
    --glass-edge: rgba(236, 228, 207, 0.14);
    --glass-rim-a: rgba(255, 248, 228, 0.42);
    --glass-rim-b: rgba(167, 178, 180, 0.14);
    --glass-sheen: rgba(255, 246, 222, 0.16);
    --glass-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
    --hair: rgba(236, 228, 207, 0.14);

    --surface: #0b0a08;
    --field-edge: rgba(236, 228, 207, 0.5);

    --ok: #9ccb98;
    --warn: #e6c06a;
    --danger: #f0a090;
    --info: #9dbce0;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --mode: dark;
  --bg: #000000;
  --grout: #000000;
  --tile-lift: 0;
  --tshadow: 0 2px 28px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.45);
  --menu-fill: rgba(14, 13, 10, 0.86);
  --pool: 0.74;
  --veil: 0, 0, 0;

  --text: #ece4cf;
  --text-2: rgba(236, 228, 207, 0.76);
  --accent: #c9b27c;
  --accent-ink: #17140c;
  --focus: #e8d7a6;

  --glass-fill: rgba(26, 24, 18, 0.42);
  --glass-fill-2: rgba(60, 56, 44, 0.18);
  --glass-edge: rgba(236, 228, 207, 0.14);
  --glass-rim-a: rgba(255, 248, 228, 0.42);
  --glass-rim-b: rgba(167, 178, 180, 0.14);
  --glass-sheen: rgba(255, 246, 222, 0.16);
  --glass-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
  --hair: rgba(236, 228, 207, 0.14);

  --surface: #0b0a08;
  --field-edge: rgba(236, 228, 207, 0.5);

  --ok: #9ccb98;
  --warn: #e6c06a;
  --danger: #f0a090;
  --info: #9dbce0;
}