/* 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 / 50%);
  --backdrop: rgb(8 6 20 / 70%);
  --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: #fff;
  --on-fake-window: #1e1e22;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ecebf7;
  --surface: #fff;
  --line: #e3def4;
  --line-strong: #6f6d84;
  --text: #141821;
  --text-2: #4a5060;
  --muted: #515663;
  --shelly: #086248;
  --jack: #a61c31;
  --jack-purple: #6239c1;
  --on-shelly: #fff;
  --on-jack: #fff;
  --shadow: rgb(20 24 33 / 14%);
  --backdrop: rgb(20 24 33 / 45%);
  --purple-glow-strength: 25%;
  --green-glow-strength: 20%;
  --glow-band: #e4e0f6;
}

: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 background of every other band on the homepage and of the band that invites to the demo,
     on which every text color above has enough contrast, and the circuit lines with their glowing
     data packets behind the text of the bands. */
  --band-alt: color-mix(in srgb, var(--bg) 50%, var(--surface));
  --band-accent: color-mix(in srgb, var(--bg) 90%, var(--shelly));
  --circuit-line: color-mix(in srgb, var(--jack-purple-bright) 40%, transparent);
  --data-packet: #fff;
  --data-packet-glow: var(--jack-purple-bright);
  /* 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 / 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: #fff;
  --qr-paper: #fff;
}