/* Theme source of truth. Load after component styles. */
:root {
  --card-surface: #ffffff;
  --content-background: #f2effa;
  --chrome-surface: #eee8fa;
}
#main {
  background: var(--content-background);
}
#main > .hero, #main > section { background: transparent; }
.nav, .mobile-menu, .footer { background: var(--chrome-surface); }
.resolution-card { background: var(--card-surface); }

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --card-surface: #282330;
    --ink: #f0edf8;
    --muted: #c0bacf;
    --blue: #ad85ff;
    --blue-soft: #35274d;
    --tint: #211e2a;
    --chrome-surface: #292234;
    --content-background: #19171f;
    --line: rgba(240,237,248,.18);
  }
  body { background: var(--tint); }
  .resolution-card { border-color: var(--line); }
  .record-preview { background: #282330; }
  .logo-ring { background: #fff; }

  .continuity-section {
    --story-ink: var(--ink);
    --story-purple: var(--blue);
  }
  .continuity-step + .continuity-step,
  .continuity-ending { border-color: var(--line); }
  .continuity-step::before { border-color: var(--tint); }
  .continuity-inline-visual { background: var(--tint); }
  .continuity-inline-state { background: #282330; }
  .continuity-inline-record.is-complete strong { color: var(--ink); }

  .showcase-phone {
    border-color: #70677f;
    background: #38313f;
    box-shadow: 0 15px 34px #0006, 0 3px 8px #0004;
  }
  .showcase-earpiece { background: #b1a8bf; }
  .showcase-screen { background: #17171c; }

  /* Single decorative-border policy; device frames and focus outlines stay intact. */
  :is(.nav, .mobile-menu, .logo-ring, .store-badge, .resolution-card,
      .footer, .continuity-inline-visual, .continuity-ending,
      .continuity-step + .continuity-step) {
    border-style: none;
  }
}