@import url("./system-fonts.css");
/* Shared palette: components keep their existing aliases, all from these tokens. */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg-main: #11001C;
  --bg-surface: #190925;
  --bg-elevated: #21102F;
  --purple-primary: #8B5CF6;
  --purple-bright: #A855F7;
  --purple-soft: #C4B5FD;
  --text-primary: #F8F7FA;
  --text-secondary: #B8AEC2;
  --border-purple: rgba(168, 85, 247, 0.20);
  --bg: var(--bg-main); --bg-2: var(--bg-surface); --bg-3: var(--bg-elevated); --bg-4: #2B1939;
  --text: var(--text-primary); --text-2: var(--text-secondary); --text-3: var(--text-secondary);
  /* Filled controls need stronger white-label contrast than the decorative purple. */
  --accent: var(--action-bg); --accent-light: var(--purple-soft);
  --accent-dim: rgba(168, 85, 247, .10); --accent-glow: rgba(168, 85, 247, .10);
  --border: var(--border-purple); --border-light: rgba(168, 85, 247, .32);
  --action-bg: #7547CF; --action-hover: #6537BA;
  --danger: #ff8298; --success: #70dca6; --warning: #f4c174; --online: #70dca6;
  --surface-shadow: 0 12px 32px rgba(5, 2, 12, .18);
  --card-bg: var(--bg-2);
  --message-sent-bg: var(--bg-4);
  --message-sent-text: var(--text);
  --brand-uni: #F5F3F7; --brand-connect: #9B5CFF; --brand-backdrop: #11001C;
  /* Media overlays stay dark in every theme so labels remain readable on video. */
  --media-bg: #11001C; --media-surface: #190925; --media-elevated: #21102F;
  --media-text: #F8F7FA; --media-muted: #C4B5FD; --media-accent: #C4B5FD;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg-main: #f5f2fa; --bg-surface: #ffffff; --bg-elevated: #ede8f4;
  --bg: var(--bg-main); --bg-2: var(--bg-surface); --bg-3: var(--bg-elevated); --bg-4: #e3dced;
  --text-primary: #241b33; --text-secondary: #514460;
  --text: var(--text-primary); --text-2: var(--text-secondary); --text-3: #665775;
  --accent: #7040b5; --accent-light: #6535a8;
  --accent-dim: rgba(112, 64, 181, .09); --accent-glow: rgba(112, 64, 181, .14);
  --border: #d8cfe4; --border-light: #baabc9;
  --action-bg: #7040b5; --action-hover: #5b309a;
  --danger: #af2444; --success: #18764d; --warning: #8c570d; --online: #18764d;
  --surface-shadow: 0 12px 32px rgba(48, 27, 76, .07);
}
:root[data-theme="midnight"] {
  color-scheme: dark;
  --bg-main: #0b1220; --bg-surface: #121d30; --bg-elevated: #1b2940;
  --bg: var(--bg-main); --bg-2: var(--bg-surface); --bg-3: var(--bg-elevated); --bg-4: #26364f;
  --text-primary: #f1f6ff; --text-secondary: #c0cfe4;
  --text: var(--text-primary); --text-2: var(--text-secondary); --text-3: #a2b5cf;
  --accent: #416caf; --accent-light: #a2c5ff;
  --accent-dim: rgba(122, 169, 239, .13); --accent-glow: rgba(82, 138, 224, .2);
  --border: #2e405b; --border-light: #496181;
  --action-bg: #416caf; --action-hover: #335991;
  --danger: #ff879d; --success: #6bddb3; --warning: #efc47d; --online: #6bddb3;
  --surface-shadow: 0 12px 32px rgba(2, 6, 14, .22);
}
:root[data-theme="blackgrey"] {
  color-scheme: dark;
  --bg-main: #090a0c; --bg-surface: #141518; --bg-elevated: #202226;
  --bg: var(--bg-main); --bg-2: var(--bg-surface); --bg-3: var(--bg-elevated); --bg-4: #2d3035;
  --text-primary: #f4f5f7; --text-secondary: #d1d3d8;
  --text: var(--text-primary); --text-2: var(--text-secondary); --text-3: #b1b5be;
  --accent: #626773; --accent-light: #d6d9e1;
  --accent-dim: rgba(190, 196, 208, .12); --accent-glow: rgba(160, 167, 183, .15);
  --border: #34373e; --border-light: #525762;
  --action-bg: #585e6b; --action-hover: #484e5b;
  --danger: #ff899e; --success: #83d3ab; --warning: #e7c28b; --online: #83d3ab;
  --surface-shadow: 0 12px 32px rgba(0, 0, 0, .2);
}
html, body { background-color: var(--bg); }
::selection { background: var(--accent); color: #fff; }
input, textarea, select { accent-color: var(--accent); }
.theme-settings { flex-wrap: wrap; gap: 14px; }
.theme-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.theme-options .theme-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; width: 100%; height: auto; min-height: 90px; padding: 10px 4px;
  border: 1px solid var(--border-light); border-radius: 12px;
  background: var(--bg-3); color: var(--text-2); font: inherit;
  font-size: .75rem; line-height: 1.3; font-weight: 600;
}
.theme-options .theme-btn.active { color: var(--text); border-color: var(--accent-light); box-shadow: inset 0 0 0 1px var(--accent-light); background: var(--accent-dim); }
.theme-swatch { display: block; width: 36px; height: 27px; border-radius: 7px; border: 1px solid rgba(150,140,170,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
#theme-dark .theme-swatch { background: linear-gradient(135deg, #190925 55%, #8B5CF6 55%); }
#theme-light .theme-swatch { background: linear-gradient(135deg, #ffffff 55%, #7040b5 55%); }
#theme-midnight .theme-swatch { background: linear-gradient(135deg, #121d30 55%, #416caf 55%); }
#theme-blackgrey .theme-swatch { background: linear-gradient(135deg, #141518 55%, #626773 55%); }
@media (max-width: 360px) { .theme-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Only actual wordmarks use these spans; prose stays normal text. */
.wordmark { white-space: nowrap; background: none; -webkit-text-fill-color: currentColor; }
.wordmark .wordmark-uni { color: var(--brand-uni); -webkit-text-fill-color: var(--brand-uni); }
.wordmark .wordmark-connect { color: var(--brand-connect); -webkit-text-fill-color: var(--brand-connect); }
/* A compact dark backing preserves the specified white branding in the light palette. */
:root[data-theme="light"] .wordmark { background: var(--brand-backdrop); border-radius: 3px; box-shadow: 0 0 0 4px var(--brand-backdrop); }