/*
 * NeuroX New Jersey brand tokens for the BRAINS A11Y standard.
 *
 * Load after the standard's tokens/base.css. Everything here sits in the
 * `brains-a11y-brand` cascade layer, because the standard's axis rules are
 * unlayered: high and soft contrast, and the reading font, rewrite these
 * tokens and must win. Take this file out of the layer and those axes stop
 * working without an error.
 *
 * Bone is the light theme and Midnight the dark one. With no choice saved,
 * the page follows the operating system. The dark block is applied from two
 * directions: the system asking for dark (unless the reader chose Bone), and
 * the reader choosing Midnight.
 *
 * Colours come from the logo: ink #303C48, teal #14BFB3, indigo #303090,
 * magenta #E40C90. Text uses the darker teal #0A7A72 and magenta #B80A74 on
 * white, because the logo colours fail contrast there. Measured pairs:
 * ink on teal 4.9:1, white on indigo 10.8:1, white on #B80A74 6.3:1,
 * ink on white 11.3:1. White text never goes on #14BFB3 or #E40C90.
 */
@layer brains-a11y-brand {
  :root {
    --bg: #ffffff;
    --surface: #f5f6fb;
    --surface-2: #e6e6f8;
    --overlay-bg: #ffffff;
    --ink: #303c48;
    --ink-muted: #5d6b78;
    --ink-muted-high: #303c48;
    --line: #dce0ea;
    --line-high: rgba(48, 60, 72, 0.8);
    --control-border: rgba(48, 60, 72, 0.55);

    /* Soft contrast: off-white and off-black, for readers who find full contrast glaring. */
    --bg-soft: #f5f3ee;
    --surface-soft: #ecebe5;
    --ink-soft: #3a4552;
    --ink-muted-soft: #56626e;

    --accent: #0a7a72;
    --accent-ink: #ffffff;
    --focus-ring: #303090;

    --teal: #14bfb3;
    --teal-text: #0a7a72;
    --indigo: #303090;
    --magenta: #e40c90;
    --magenta-text: #b80a74;
    --tint-teal: #d9f5f2;
    --tint-mag: #fce4f1;
    --tint-ind: #e6e6f8;
    --band-ind: #303090;
    --band-mag: #b80a74;
    --primary-ink: #ffffff;
    /* Text gradient: every stop passes AA on the page. */
    --g1: #0a7a72;
    --g2: #303090;
    --g3: #b80a74;
    /* Decorative strokes. */
    --s1: #14bfb3;
    --s2: #4040b8;
    --s3: #e40c90;

    --font-display: "Lexend", "Atkinson Hyperlegible", system-ui, sans-serif;
    --font-body: "Atkinson Hyperlegible", Verdana, "Segoe UI", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

    color-scheme: light;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="bone"]) {
      --bg: #0f141b;
      --surface: #161d26;
      --surface-2: #1e1e45;
      --overlay-bg: #161d26;
      --ink: #e8edf2;
      --ink-muted: #a9b4bf;
      --ink-muted-high: #e8edf2;
      --line: #2a3440;
      --line-high: rgba(232, 236, 240, 0.75);
      --control-border: rgba(232, 236, 240, 0.48);
      --bg-soft: #161a20;
      --surface-soft: #1d222a;
      --ink-soft: #d3d8de;
      --ink-muted-soft: #a3adb8;
      --accent: #5fe0d5;
      --accent-ink: #0f141b;
      --focus-ring: #b4b4ff;
      --teal-text: #5fe0d5;
      --magenta-text: #ff8fd0;
      --tint-teal: #12302e;
      --tint-mag: #36172a;
      --tint-ind: #1e1e45;
      --band-ind: #2b2b85;
      --primary-ink: #1a0712;
      --g1: #5fe0d5;
      --g2: #b4b4ff;
      --g3: #ff8fd0;
      --s1: #2ed3c6;
      --s2: #8c8cff;
      --s3: #ff4fb8;
      color-scheme: dark;
    }
  }

  /* Soft contrast lowers the page's brightness, so the dark teal text is taken
   * one step darker to keep 4.5:1 on the softer grounds (5.4:1 on #ECEBE5). */
  :root[data-contrast="soft"]:not([data-theme="midnight"]) {
    --teal-text: #086a63;
    --accent: #086a63;
  }

  :root[data-theme="midnight"] {
    --bg: #0f141b;
    --surface: #161d26;
    --surface-2: #1e1e45;
    --overlay-bg: #161d26;
    --ink: #e8edf2;
    --ink-muted: #a9b4bf;
    --ink-muted-high: #e8edf2;
    --line: #2a3440;
    --line-high: rgba(232, 236, 240, 0.75);
    --control-border: rgba(232, 236, 240, 0.48);
    --bg-soft: #161a20;
    --surface-soft: #1d222a;
    --ink-soft: #d3d8de;
    --ink-muted-soft: #a3adb8;
    --accent: #5fe0d5;
    --accent-ink: #0f141b;
    --focus-ring: #b4b4ff;
    --teal-text: #5fe0d5;
    --magenta-text: #ff8fd0;
    --tint-teal: #12302e;
    --tint-mag: #36172a;
    --tint-ind: #1e1e45;
    --band-ind: #2b2b85;
    --primary-ink: #1a0712;
    --g1: #5fe0d5;
    --g2: #b4b4ff;
    --g3: #ff8fd0;
    --s1: #2ed3c6;
    --s2: #8c8cff;
    --s3: #ff4fb8;
    color-scheme: dark;
  }
}