/* Shared Mail Sandbox presentation palette for both mailbox and Platform Admin. */
:root {
  color-scheme: light;
  --text: #172e37;
  --page: #f3f6f5;
  --surface: #ffffff;
  --border: #d4dfdc;
  --accent: #1e6657;
  --accent-strong: #245c4f;
  --on-accent: #ffffff;
  --secondary: #50676d;
  --muted: #586e69;
  --soft: #edf4f1;
  --hover: #f0f7f3;
  --input: #fbfdfc;
  --code: #f5f8f7;
  --danger-bg: #fff5f3;
  --danger: #9a382c;
  --danger-border: #e8c9c4;
  --notice-bg: #fffae8;
  --notice: #68521b;
  --notice-border: #e7d7a1;
  --focus: #b37410;
  --shadow: #193b3010;
}

:root[data-theme="midnight"] {
  color-scheme: dark;
  --text: #e5edf7;
  --page: #101722;
  --surface: #192332;
  --border: #394a60;
  --accent: #a0b9ff;
  --accent-strong: #b5caff;
  --on-accent: #111d37;
  --secondary: #c2ccdb;
  --muted: #a8b7ca;
  --soft: #24334b;
  --hover: #223044;
  --input: #131d2c;
  --code: #111b29;
  --danger-bg: #392329;
  --danger: #ffb6ac;
  --danger-border: #80504f;
  --notice-bg: #332d20;
  --notice: #f4d594;
  --notice-border: #746039;
  --focus: #f1cc7b;
  --shadow: #00000030;
}

:root[data-theme="parchment"] {
  color-scheme: light;
  --text: #392e28;
  --page: #f5efe4;
  --surface: #fffaf2;
  --border: #dacbb8;
  --accent: #91442d;
  --accent-strong: #793b28;
  --on-accent: #ffffff;
  --secondary: #69564a;
  --muted: #786354;
  --soft: #f2e5d5;
  --hover: #f9efdf;
  --input: #fffdf8;
  --code: #f4eadb;
  --danger-bg: #fce9e2;
  --danger: #923827;
  --danger-border: #dfb6a7;
  --notice-bg: #fff0cf;
  --notice: #765315;
  --notice-border: #dbc087;
  --focus: #9c542d;
  --shadow: #593b2012;
}

/* Studio — adapted from ShortLink's warm editorial interface. */
:root[data-theme="studio"] {
  color-scheme: light;
  --text: #2f2942;
  --page: #f8f5fb;
  --surface: #fffdfd;
  --border: #dcd1ef;
  --accent: #6a4bb4;
  --accent-strong: #553b94;
  --on-accent: #ffffff;
  --secondary: #5f5270;
  --muted: #756d83;
  --soft: #f4efff;
  --hover: #f3edff;
  --input: #ffffff;
  --code: #f3eff8;
  --danger-bg: #fff0ee;
  --danger: #a33f39;
  --danger-border: #e3b9b3;
  --notice-bg: #fff3df;
  --notice: #76522d;
  --notice-border: #ead0a7;
  --focus: #e07748;
  --shadow: #49375f16;
}

/* Control — adapted from ShortLink's compact operations interface. */
:root[data-theme="control"] {
  color-scheme: dark;
  --text: #d8e3e8;
  --page: #0a1014;
  --surface: #10191e;
  --border: #30414a;
  --accent: #62cdb4;
  --accent-strong: #7ce0c8;
  --on-accent: #07130f;
  --secondary: #c0ced3;
  --muted: #82959e;
  --soft: #17242b;
  --hover: #132027;
  --input: #0b1317;
  --code: #081014;
  --danger-bg: #301b1c;
  --danger: #ffb5af;
  --danger-border: #6d3937;
  --notice-bg: #132c24;
  --notice: #8de2c9;
  --notice-border: #285d4f;
  --focus: #7ee4ca;
  --shadow: #00000055;
}

/* ShortLink-style floating segmented theme selector, shared by every surface. */
.ui-picker {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 10px 30px var(--shadow);
  backdrop-filter: blur(12px);
}

.ui-picker-label {
  padding: 0 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ui-picker-options {
  display: flex;
  gap: 4px;
}

.ui-picker button {
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
}

.ui-picker button:hover {
  filter: none;
  background: var(--hover);
  border-color: var(--accent);
}

.ui-picker button.selected,
.ui-picker button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

@media (max-width: 700px) {
  .ui-picker {
    right: 10px;
    bottom: 10px;
    max-width: calc(100vw - 20px);
  }

  .ui-picker-label {
    display: none;
  }

  .ui-picker-options {
    max-width: 100%;
    overflow-x: auto;
  }
}