/* Light is the default in styles.css. CSS follows preference changes immediately,
   including before JavaScript loads and when JavaScript is disabled. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #101d19;
    --ink: #e9f3e9;
    --teal: #72d7ba;
    --muted: #b1c3b7;
    --line: #344b3f;
    --mint: #253b2e;
  }

  button:focus-visible,
  a:focus-visible,
  summary:focus-visible { outline-color: #edb58b; }

  .skip-link { background: #1d3028; }
  .button-outline { border-color: #597060; }
  .button-outline:hover { background: #253b2e; }
  .button-primary { color: #102a22; box-shadow: 0 3px 0 #3c947c; }
  .button-primary:hover { background: #95e5cd; }
  .status-dot { box-shadow: 0 0 0 4px #72d7ba12; }

  .hero-art { background: #22382b; }
  .art-orbit { border-color: #40543d; }
  .speech-note {
    background: #344332;
    box-shadow: 0 6px 20px #0003;
  }
  .art-spark { color: #dfa878; }
  .spark-two { color: var(--teal); }

  .example-window,
  .voice-bar {
    background: #1b2c25;
    border-color: #47604e;
    box-shadow: 0 14px 30px #0003;
  }
  .window-top { border-color: var(--line); color: var(--muted); }
  .example-tab { color: var(--muted); }
  .example-tab:hover { background: #2b4437; color: var(--ink); }
  .example-tab.active { background: #304f3e; color: #a2e7cc; }
  .example-label,
  .example-bottom,
  .demo-disclaimer { color: var(--muted); }
  .enter-key { background: #293f32; border-color: #47604e; }
  .voice-symbol { background: #2b4437; }
  .waveform i,
  .static-wave i { background: var(--teal); }
  .play-button { background: #2b4437; border-color: #536f59; }
  .play-button:hover { background: #3b5844; }

  .use-card { background: #1d3027; border-color: #3a5042; }
  .email-card { background: #352b24; border-color: #574739; }
  .note-card { background: #2a2c3d; border-color: #454860; }
  .card-icon { background: #314d3b; }
  .email-card .card-icon { background: #59412f; color: #f0c09a; }
  .note-card .card-icon { background: #414364; color: #d0ccff; }
  .use-card > p,
  .mini-label,
  .card-category { color: #c3cfc5; }
  .mini-example { background: #0c17164d; border-color: #c9dbc329; }

  .how-section { background: #192a22; border-color: var(--line); }
  .step-visual kbd {
    background: #283e30;
    border-color: #526b53;
    box-shadow: 0 5px 0 #354e39;
  }
  .done-note {
    background: #283e30;
    border-color: #526b53;
    box-shadow: 0 4px 0 #354e39;
  }
  .step-title > span { color: var(--muted); }
  .how-note,
  .steps li + li { border-color: var(--line); }

  .privacy-illustration { background: #22382b; border-color: #3d5642; }
  .privacy-label { color: var(--muted); }
  .computer-screen {
    background: #1a2a22;
    border-color: #608468;
    box-shadow: 0 6px 0 #354d38;
  }
  .computer-stand,
  .computer-foot { background: #608468; }
  .privacy-sticker {
    background: #314731;
    border-color: #56734e;
    box-shadow: 0 5px 0 #0b1a174d;
  }
  .privacy-spark { color: #b2c688; }
  summary > span { color: var(--teal); }

  .beta-card { background: #1b4034; border: 1px solid #3e604b; }
  .mascot-halo { background: #12372f; border-color: #42745f; }
  .mascot-hello { background: #2c5f50; color: #e3fff4; }
}