/* --------------------------------
   TALK THEME

   The dark values of the tokens in styles-light.css, for /talk.html and
   /clinic/talk.html only. The prototypes load styles-light.css without
   this file, so they stay light. The palette is the front page's, so
   moving from one to the other changes nothing.

   The same set is written twice: once for a device set to dark with no
   choice saved, and once for a saved choice of dark. theme.js sets
   data-theme, and only when a choice is saved.
   test/pages.test.js fails if the two sets differ.
-------------------------------- */

:root {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --blue-dark: #3e9ae0;
    --blue: #3e9ae0;
    --blue-soft: #90c3ea;
    --blue-muted: #6f859a;

    --page-1: #15304a;
    --page-2: #0f2435;
    --page-3: #0b1824;
    --page-4: #09141e;

    --ground: #0b1824;
    --surface: #112334;
    --card: #112334;
    --card-line: #24405b;
    --raised: #1a3248;
    --raised-hover: #24405b;
    --field: #0b1824;
    --tint: #1a3248;
    --icon-ground: #1a3248;
    --ring-ground: #112334;

    --line: #24405b;
    --hairline: #33566f;
    --control-line: #7f99b2;
    --button-line: #6cabda;

    --ink: #e4edf6;
    --heading: #f1f6fb;
    --ink-2: #b4c5d5;
    --placeholder: #8fa3b6;
    --link: #8cc2ec;
    --accent: #8cc2ec;
    --focus: #8cc2ec;
    --error: #f0a39c;

    --good-ink: #8fd4aa;
    --good-ground: #143328;
    --good-line: #2f6b4b;

    --logo-1: #e8f1fd;
    --logo-2: #6fabdf;
    --logo-gap: #0d1e2d;

    --card-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    --step-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    --hint-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
    --wave-shadow: 0 0 6px rgba(111, 171, 223, 0.45);

    --talk-rim: linear-gradient(
      145deg,
      #c3d2e0 0%,
      #6f859a 12%,
      #24405b 28%,
      #0b1824 65%,
      #33566f 88%,
      #a9bccd 100%
    );
    --talk-shadow:
      0 25px 45px rgba(0, 0, 0, 0.55),
      inset 0 2px 3px rgba(255, 255, 255, 0.55),
      inset 0 -5px 8px rgba(0, 0, 0, 0.7);
    --talk-shadow-pressed:
      0 10px 20px rgba(0, 0, 0, 0.6),
      inset 0 5px 10px rgba(0, 0, 0, 0.7);
    --talk-dome:
      radial-gradient(circle, rgba(255, 255, 255, 0.07) 0.7px, transparent 1.5px) 0 0 /
        7px 7px,
      radial-gradient(circle, rgba(255, 255, 255, 0.04) 0.4px, transparent 1.1px)
        3.5px 3.5px / 7px 7px,
      radial-gradient(circle, #1a3248 0%, #112334 65%, #0b1824 100%);
    --talk-dome-glow:
      0 0 12px rgba(62, 154, 224, 0.5),
      0 0 25px rgba(62, 154, 224, 0.3),
      inset 0 0 12px rgba(255, 255, 255, 0.1);
    --talk-ring: #6fabdf;
    --talk-ring-glow:
      0 0 6px rgba(140, 194, 236, 0.7),
      0 0 15px rgba(111, 171, 223, 0.45),
      0 0 30px rgba(62, 154, 224, 0.3);
    --talk-ring-on: #e8f1fd;
    --talk-ring-on-glow:
      0 0 10px rgba(232, 241, 253, 0.9),
      0 0 25px rgba(140, 194, 236, 0.8),
      0 0 50px rgba(62, 154, 224, 0.6),
      0 0 90px rgba(62, 154, 224, 0.35);
    --mic-edge: #cfe3f5;
    --mic-core: #ffffff;
    --mic-frame: #e8f1fd;
    --mic-shadow: drop-shadow(0 0 6px rgba(140, 194, 236, 0.6));

    --switch-body: linear-gradient(180deg, #33566f, #a9bccd);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --blue-dark: #3e9ae0;
  --blue: #3e9ae0;
  --blue-soft: #90c3ea;
  --blue-muted: #6f859a;

  --page-1: #15304a;
  --page-2: #0f2435;
  --page-3: #0b1824;
  --page-4: #09141e;

  --ground: #0b1824;
  --surface: #112334;
  --card: #112334;
  --card-line: #24405b;
  --raised: #1a3248;
  --raised-hover: #24405b;
  --field: #0b1824;
  --tint: #1a3248;
  --icon-ground: #1a3248;
  --ring-ground: #112334;

  --line: #24405b;
  --hairline: #33566f;
  --control-line: #7f99b2;
  --button-line: #6cabda;

  --ink: #e4edf6;
  --heading: #f1f6fb;
  --ink-2: #b4c5d5;
  --placeholder: #8fa3b6;
  --link: #8cc2ec;
  --accent: #8cc2ec;
  --focus: #8cc2ec;
  --error: #f0a39c;

  --good-ink: #8fd4aa;
  --good-ground: #143328;
  --good-line: #2f6b4b;

  --logo-1: #e8f1fd;
  --logo-2: #6fabdf;
  --logo-gap: #0d1e2d;

  --card-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --step-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  --hint-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  --wave-shadow: 0 0 6px rgba(111, 171, 223, 0.45);

  --talk-rim: linear-gradient(
    145deg,
    #c3d2e0 0%,
    #6f859a 12%,
    #24405b 28%,
    #0b1824 65%,
    #33566f 88%,
    #a9bccd 100%
  );
  --talk-shadow:
    0 25px 45px rgba(0, 0, 0, 0.55),
    inset 0 2px 3px rgba(255, 255, 255, 0.55),
    inset 0 -5px 8px rgba(0, 0, 0, 0.7);
  --talk-shadow-pressed:
    0 10px 20px rgba(0, 0, 0, 0.6),
    inset 0 5px 10px rgba(0, 0, 0, 0.7);
  --talk-dome:
    radial-gradient(circle, rgba(255, 255, 255, 0.07) 0.7px, transparent 1.5px) 0 0 /
      7px 7px,
    radial-gradient(circle, rgba(255, 255, 255, 0.04) 0.4px, transparent 1.1px)
      3.5px 3.5px / 7px 7px,
    radial-gradient(circle, #1a3248 0%, #112334 65%, #0b1824 100%);
  --talk-dome-glow:
    0 0 12px rgba(62, 154, 224, 0.5),
    0 0 25px rgba(62, 154, 224, 0.3),
    inset 0 0 12px rgba(255, 255, 255, 0.1);
  --talk-ring: #6fabdf;
  --talk-ring-glow:
    0 0 6px rgba(140, 194, 236, 0.7),
    0 0 15px rgba(111, 171, 223, 0.45),
    0 0 30px rgba(62, 154, 224, 0.3);
  --talk-ring-on: #e8f1fd;
  --talk-ring-on-glow:
    0 0 10px rgba(232, 241, 253, 0.9),
    0 0 25px rgba(140, 194, 236, 0.8),
    0 0 50px rgba(62, 154, 224, 0.6),
    0 0 90px rgba(62, 154, 224, 0.35);
  --mic-edge: #cfe3f5;
  --mic-core: #ffffff;
  --mic-frame: #e8f1fd;
  --mic-shadow: drop-shadow(0 0 6px rgba(140, 194, 236, 0.6));

  --switch-body: linear-gradient(180deg, #33566f, #a9bccd);
}