/* Shared midnight-blue / petrol theme, including editorial and demo states. */
:root {
  color-scheme: dark;
  --ink: #edf3f2;
  --wine: #123e4b;
  --paper: #081c2a;
  --gold: #c6a875;
  --line: #365461;
  --red: #ffabb0;
  --muted: #afc4ca;
  --surface: #102d3b;
  --deep: #061620;
  --action: #246879;
}
body { background: var(--paper); color: var(--ink); }
.draftbar { background: var(--deep); color: var(--muted); }
header { background: var(--paper); }
.button { background: var(--action); border-color: var(--action); color: #fff; }
.button.light { background: var(--gold); border-color: var(--gold); color: var(--deep); }
.button.outline { background: transparent; color: var(--ink); border-color: var(--muted); }
.placeholder { background: var(--surface); border-color: var(--line); color: var(--muted); }
.placeholder:before { border-color: #527580; }
.placeholder .ph-icon { color: #82a7ae; }
.hero-art { background: #0c2938; color: #c2d4d8; border: 0; }
.hero-art:before { border-color: #426572; }
.hero-art .ph-icon { color: #628994; }
.hero-art strong { color: var(--gold); }
.marquee { background: var(--wine); color: #e4d1aa; }
.night, .panel { background: var(--surface); }
.dark { background: var(--wine); color: var(--ink); }
.dark .placeholder { background: #0d303d; border-color: #53717a; color: #c2d4d8; }
.dark .ai { color: var(--red); }
.fact { border-color: #54727b; }
.newsletter { background: var(--surface); }
input, select, textarea { background: var(--deep); color: var(--ink); border-color: #56737d; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type=checkbox] { accent-color: var(--action); }
.notice { background: #163c4a; color: var(--ink); }
.success { background: #173e3c; color: #d1ebe1; }
.hubnav button, .menu { color: var(--ink); }
.hubnav button.active { background: var(--action); color: #fff; }
footer { background: var(--deep); color: #c2d4d8; }
footer .bottom { border-color: var(--line); }
.button:hover { background: #30798a; border-color: #30798a; color: #fff; }
.button.light:hover { background: #ddc396; border-color: #ddc396; color: var(--deep); }
.button.outline:hover { background: var(--wine); border-color: var(--muted); }