/* Dark is the fallback. An explicit system light preference selects light. */
:root {
  color-scheme: dark;
  --page: #14131b;
  --surface: #1e1c28;
  --field: #24212f;
  --text: #f0edf7;
  --body-text: #d0cbdc;
  --muted: #b2aabe;
  --border: #393342;
  --accent: #c0a9f5;
  --button: #bba1f1;
  --button-hover: #ccb7fa;
  --button-text: #251937;
  --tint: #30263f;
  --drop: #211d2c;
  --drop-hover: #2c243a;
  --drop-border: #625273;
  --error: #ffa7bd;
  --shadow: #00000020;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --page: #f6f7fb;
    --surface: #ffffff;
    --field: #fcfcfe;
    --text: #26283a;
    --body-text: #565568;
    --muted: #737083;
    --border: #e3e0eb;
    --accent: #745aaa;
    --button: #7965c4;
    --button-hover: #6853b3;
    --button-text: #ffffff;
    --tint: #f1edfa;
    --drop: #fcfbfe;
    --drop-hover: #f7f3fe;
    --drop-border: #c8bfd9;
    --error: #b03d5e;
    --shadow: #32325405;
  }
}

:root { color: var(--text); background: var(--page); }
.card, .bordered { background: var(--surface); border-color: var(--border); }
.card { box-shadow: 0 12px 50px var(--shadow); }
p, .intro, .note { color: var(--body-text); }
.brand-sub, .muted, .footnote, footer, .tab, .empty,
.dropzone span:not(.upload-icon), .dropzone small,
.attachment small, .invitation small { color: var(--muted); }
.eyebrow, .small-icon, .quiet, .text-link, .attachment a,
.invitation a, .tab.active { color: var(--accent); }
.brand-sub, .send-bottom, .file-row, footer, .tabs,
.attachment, .invitation { border-color: var(--border); }
.primary, .mark { background: var(--button); color: var(--button-text); }
.primary { box-shadow: 0 4px 9px var(--shadow); }
.primary:hover { background: var(--button-hover); }
input:not([type=file]), textarea {
  background: var(--field); color: var(--text); border-color: var(--border);
}
textarea { background: var(--surface); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
textarea:focus { outline-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); }
.dropzone:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; }
.pill, .upload-icon, .success-icon, .avatar {
  background: var(--tint); color: var(--accent);
}
.dropzone { background: var(--drop); border-color: var(--drop-border); }
.dropzone:hover, .dropzone.over { background: var(--drop-hover); border-color: var(--accent); }
.error { color: var(--error); }
progress { accent-color: var(--button); }
.tab.active { border-bottom-color: var(--accent); }
.attachment img, .attachment video, #invite-result code { background: var(--tint); }
.empty strong { color: var(--body-text); }