/* Every named palette supplies the same semantic tokens. Components own geometry.
   Keep the two CSS-only System defaults identical to their named palettes; the
   palette tests check this as well as readable text/status contrast. */
:root {
  color-scheme: light;
  --bg: #f5f2eb;
  --surface: #fffdf8;
  --raised: #eee9df;
  --nav-bg: #eee9df;
  --text: #282821;
  --muted: #626056;
  --line: #dcd6c9;
  --accent: #aa421f;
  --accent-ink: #fffaf4;
  --hover: #e7e0d4;
  --danger: #a13236;
  --danger-bg: #f9e7e4;
  --success: #286b43;
  --success-bg: #e6eee3;
  --warning: #795211;
  --warning-bg: #f3ead0;
  --online: #346b4f;
  --unread: #aa421f;
  --focus: #aa421f;
  --overlay: #211f1b99;
  --media-bg: #171c1d;
  --shadow: 0 6px 24px #332b1814;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #10191b;
    --surface: #142023;
    --raised: #1b2a2d;
    --nav-bg: #0b1517;
    --text: #e4ebe7;
    --muted: #9aafab;
    --line: #2b3c3e;
    --accent: #c4edbf;
    --accent-ink: #203322;
    --hover: #203337;
    --danger: #f0aca5;
    --danger-bg: #3e2728;
    --success: #a4d3ab;
    --success-bg: #213a30;
    --warning: #f0cf86;
    --warning-bg: #3b3220;
    --online: #a4d3ab;
    --unread: #c4edbf;
    --focus: #c4edbf;
    --overlay: #071315aa;
    --media-bg: #080e10;
    --shadow: 0 18px 60px #00000055;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #10191b;
  --surface: #142023;
  --raised: #1b2a2d;
  --nav-bg: #0b1517;
  --text: #e4ebe7;
  --muted: #9aafab;
  --line: #2b3c3e;
  --accent: #c4edbf;
  --accent-ink: #203322;
  --hover: #203337;
  --danger: #f0aca5;
  --danger-bg: #3e2728;
  --success: #a4d3ab;
  --success-bg: #213a30;
  --warning: #f0cf86;
  --warning-bg: #3b3220;
  --online: #a4d3ab;
  --unread: #c4edbf;
  --focus: #c4edbf;
  --overlay: #071315aa;
  --media-bg: #080e10;
  --shadow: 0 18px 60px #00000055;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f2eb;
  --surface: #fffdf8;
  --raised: #eee9df;
  --nav-bg: #eee9df;
  --text: #282821;
  --muted: #626056;
  --line: #dcd6c9;
  --accent: #aa421f;
  --accent-ink: #fffaf4;
  --hover: #e7e0d4;
  --danger: #a13236;
  --danger-bg: #f9e7e4;
  --success: #286b43;
  --success-bg: #e6eee3;
  --warning: #795211;
  --warning-bg: #f3ead0;
  --online: #346b4f;
  --unread: #aa421f;
  --focus: #aa421f;
  --overlay: #211f1b99;
  --media-bg: #171c1d;
  --shadow: 0 6px 24px #332b1814;
}
/* Browser controls use classification, so several named themes may be dark. */
:root[data-color-scheme="dark"] { color-scheme: dark; }
:root[data-color-scheme="light"] { color-scheme: light; }