/* The colors of both websites, the legal pages, the choice screen and the demo, in the theme that
   theme.js sets in data-theme. The demo does not set a theme and shows the dark one. Each pair of text and
   background color used by the stylesheets has a contrast of at least 4.5:1, and --line-strong has
   3:1 against --bg and --surface, also where --page-glow is strongest. Green belongs to Shelly, red
   and purple to Jack. fun-theme.css weights them for the fun website. */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #18162a;
  --surface: #24213d;
  --line: #38335a;
  --line-strong: #7f7a9c;
  --text: #f1f1ee;
  --text-2: #b6b6bd;
  --muted: #a0a0a8;
  --shelly: var(--shelly-bright);
  --jack: #ff5468;
  --jack-purple: var(--jack-purple-bright);
  --on-shelly: #062019;
  --on-jack: #1e1e22;
  --shadow: rgb(0 0 0 / 0.5);
  --backdrop: rgb(8 6 20 / 0.7);
  --purple-glow-strength: 12%;
  --green-glow-strength: 0%;
  --glow-band: transparent;
  /* The light of the demo, which shows only the dark theme: the attack, the red cut of the alarm,
     the win of Jack and the win of Shelly. Every text color above has a contrast of at least 4.5:1
     on each of them. The fake windows, the chat and the call are plain light cards, with
     --on-fake-window as their text and --fake-message behind each message of the chat. */
  --mood-attack: #141118;
  --mood-alarm: #4d0a14;
  --mood-jack: #3a0a12;
  --mood-shelly: #10302a;
  --fake-window: #ececf0;
  --fake-message: #ffffff;
  --on-fake-window: #1e1e22;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f1fb;
  --surface: #ffffff;
  --line: #e3def4;
  --line-strong: #7d7b94;
  --text: #141821;
  --text-2: #4a5060;
  --muted: #5c6270;
  --shelly: #096e51;
  --jack: #bb1f37;
  --jack-purple: #6d3fd6;
  --on-shelly: #ffffff;
  --on-jack: #ffffff;
  --shadow: rgb(20 24 33 / 0.14);
  --backdrop: rgb(20 24 33 / 0.45);
  --purple-glow-strength: 0%;
  --green-glow-strength: 0%;
  --glow-band: #e7e2f8;
}

:root {
  /* The green of Shelly and the purple of Jack in the dark theme, which the glow uses in both themes. */
  --shelly-bright: #3fe0b0;
  --jack-purple-bright: #a07aff;
  --page-glow:
    radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--jack-purple-bright) var(--purple-glow-strength), transparent), transparent 55%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--shelly-bright) var(--green-glow-strength), transparent), transparent 50%),
    linear-gradient(180deg, var(--glow-band), transparent 60%);
  --accent: var(--shelly);
  --on-accent: var(--on-shelly);
  --focus: var(--shelly);
  --success: var(--shelly);
  --danger: var(--jack);
  /* The stage on which Shelly and Jack stand on the homepage. */
  --stage: var(--surface);
  --stage-outline: var(--line);
  /* The dark that covers a stage outside the light of a flashlight, tinted by the stage. */
  --darkness: color-mix(in oklab, var(--stage) 12%, rgb(5 7 8 / 0.97));
  /* The same in both themes: the avatar of the chat trap in the blue of a chat app, and the white
     paper behind the QR code of a trap. */
  --chat-avatar: #3d54fc;
  --on-chat-avatar: #ffffff;
  --qr-paper: #ffffff;
}