/* Rift theme engine. Owns complete app theming; feature styles should consume the shared tokens below. */
:root {
  --accent: var(--rift-user-accent, #d84b4b);
  --accent-hover: color-mix(in srgb, var(--accent), #fff 12%);
  --accent-soft: color-mix(in srgb, var(--accent), transparent 84%);
}

html[data-rift-effective-theme='graphite'] {
  --bg-0: #17191d;
  --bg-1: #202226;
  --bg-2: #1b1d21;
  --bg-3: #25282d;
  --bg-4: #2b2e34;
  --bg-5: #33373e;
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --text: #f2f3f5;
  --text-soft: #c8ccd2;
  --muted: #9ba1aa;
  --muted-2: #737a85;
  --rift-seam: #383c44;
  --rift-seam-soft: #30343b;
  color-scheme: dark;
}

html[data-rift-effective-theme='light'] {
  --bg-0: #e7e9ed;
  --bg-1: #f5f6f8;
  --bg-2: #eceef1;
  --bg-3: #e4e7eb;
  --bg-4: #dde1e6;
  --bg-5: #d3d8de;
  --border: rgba(33,38,46,.10);
  --border-strong: rgba(33,38,46,.18);
  --text: #20242a;
  --text-soft: #424952;
  --muted: #6d7480;
  --muted-2: #9097a2;
  --rift-seam: #cfd4da;
  --rift-seam-soft: #dce0e5;
  --cleanup-main: #f5f6f8;
  --cleanup-side: #eceef1;
  --cleanup-rail: #e4e7eb;
  --cleanup-hover: #e1e4e9;
  --cleanup-active: #d8dde3;
  --cleanup-border: #d2d7dd;
  --cleanup-text: #20242a;
  --cleanup-muted: #6d7480;
  color-scheme: light;
}

html[data-rift-effective-theme='light'] body,
html[data-rift-effective-theme='light'] #app,
html[data-rift-effective-theme='light'] .content-panel,
html[data-rift-effective-theme='light'] .home-view,
html[data-rift-effective-theme='light'] .chat-view,
html[data-rift-effective-theme='light'] .voice-view,
html[data-rift-effective-theme='light'] .message-list,
html[data-rift-effective-theme='light'] .r021-friends-main,
html[data-rift-effective-theme='light'] .r021-friends-shell {
  background: var(--bg-1) !important;
  color: var(--text) !important;
}

html[data-rift-effective-theme='light'] .server-rail {
  background: #e4e7eb !important;
  border-color: var(--border) !important;
}
html[data-rift-effective-theme='light'] .channel-panel,
html[data-rift-effective-theme='light'] .member-panel {
  background: var(--bg-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-rift-effective-theme='light'] .server-header {
  background: linear-gradient(112deg, color-mix(in srgb, var(--accent), transparent 94%) 0, transparent 42%), #eceef1 !important;
  color: var(--text) !important;
}
html[data-rift-effective-theme='light'] .server-header:hover,
html[data-rift-effective-theme='light'] .server-header.server-menu-open {
  background: linear-gradient(112deg, color-mix(in srgb, var(--accent), transparent 90%) 0, transparent 44%), #e4e7eb !important;
}
html[data-rift-effective-theme='light'] .content-header {
  background: linear-gradient(100deg, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 44%), #f7f8fa !important;
  color: var(--text) !important;
  box-shadow: 0 6px 18px rgba(32,36,42,.07) !important;
}
html[data-rift-effective-theme='light'] .content-header::before,
html[data-rift-effective-theme='light'] .server-header::before,
html[data-rift-effective-theme='light'] .channel-category:not(:first-child)::before,
html[data-rift-effective-theme='light'] .rail-divider {
  background-color: var(--border-strong) !important;
}

html[data-rift-effective-theme='light'] .current-user-panel,
html[data-rift-effective-theme='light'] #r021-voice-bar,
html[data-rift-effective-theme='light'] .r021-voice-bar {
  background: #e6e9ed !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-rift-effective-theme='light'] .home-button {
  background: #dfe3e8 !important;
  color: var(--accent) !important;
}
html[data-rift-effective-theme='light'] .home-button.active,
html[data-rift-effective-theme='light'] .server-button.active {
  background: var(--accent) !important;
  color: #fff !important;
}
html[data-rift-effective-theme='light'] .server-button:not(.active) {
  background: #dfe3e8 !important;
  color: #535b66 !important;
}
html[data-rift-effective-theme='light'] .server-button:not(.active):hover {
  background: #d2d7de !important;
  color: #252a31 !important;
}
html[data-rift-effective-theme='light'] .add-server,
html[data-rift-effective-theme='light'] .join-server {
  background: transparent !important;
  border-color: #c7cdd4 !important;
}

html[data-rift-effective-theme='light'] .channel-item,
html[data-rift-effective-theme='light'] .home-nav-item,
html[data-rift-effective-theme='light'] .member-item,
html[data-rift-effective-theme='light'] .dm-item,
html[data-rift-effective-theme='light'] .r021-server-utility {
  color: var(--muted) !important;
}
html[data-rift-effective-theme='light'] .channel-item:hover,
html[data-rift-effective-theme='light'] .home-nav-item:hover,
html[data-rift-effective-theme='light'] .member-item:hover,
html[data-rift-effective-theme='light'] .dm-item:hover,
html[data-rift-effective-theme='light'] .r021-server-utility:hover {
  background: #e0e3e8 !important;
  color: var(--text) !important;
}
html[data-rift-effective-theme='light'] .channel-item.active,
html[data-rift-effective-theme='light'] .home-nav-item.active,
html[data-rift-effective-theme='light'] .dm-item.active {
  background: #d8dde3 !important;
  color: var(--text) !important;
}
html[data-rift-effective-theme='light'] .channel-item.unread,
html[data-rift-effective-theme='light'] .channel-name,
html[data-rift-effective-theme='light'] .member-copy strong,
html[data-rift-effective-theme='light'] .message-author,
html[data-rift-effective-theme='light'] .message-text,
html[data-rift-effective-theme='light'] .current-user-copy strong,
html[data-rift-effective-theme='light'] .content-header strong,
html[data-rift-effective-theme='light'] #server-title {
  color: var(--text) !important;
}
html[data-rift-effective-theme='light'] .channel-category-title,
html[data-rift-effective-theme='light'] .section-heading,
html[data-rift-effective-theme='light'] .member-copy span,
html[data-rift-effective-theme='light'] .current-user-copy span,
html[data-rift-effective-theme='light'] .channel-heading span:last-child,
html[data-rift-effective-theme='light'] .server-header-kicker {
  color: var(--muted) !important;
}

html[data-rift-effective-theme='light'] .channel-heading:not(.ui0213-dm-heading) > .channel-symbol {
  background: #e8ebef !important;
  border-color: #d2d7dd !important;
  color: #5d6570 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45) !important;
}
html[data-rift-effective-theme='light'] .content-header .header-actions .icon-button:hover,
html[data-rift-effective-theme='light'] .icon-button:hover {
  background: #e1e4e9 !important;
  color: #252a31 !important;
}
html[data-rift-effective-theme='light'] .content-header .header-actions .icon-button:active {
  background: color-mix(in srgb, var(--accent), transparent 86%) !important;
  color: color-mix(in srgb, var(--accent), #20242a 32%) !important;
}

html[data-rift-effective-theme='light'] .composer,
html[data-rift-effective-theme='light'] .modal,
html[data-rift-effective-theme='light'] .message-actions,
html[data-rift-effective-theme='light'] .context-menu,
html[data-rift-effective-theme='light'] .r021-status-menu,
html[data-rift-effective-theme='light'] .r021-profile-card,
html[data-rift-effective-theme='light'] .ui0212-channel-settings-card,
html[data-rift-effective-theme='light'] .ui0212-server-settings-card {
  background: #fff !important;
  color: var(--text) !important;
  border-color: #d4d9df !important;
  box-shadow: 0 16px 42px rgba(28,33,40,.14) !important;
}
html[data-rift-effective-theme='light'] .composer textarea,
html[data-rift-effective-theme='light'] .composer input,
html[data-rift-effective-theme='light'] .modal input,
html[data-rift-effective-theme='light'] .modal textarea,
html[data-rift-effective-theme='light'] .modal select,
html[data-rift-effective-theme='light'] .r021-search,
html[data-rift-effective-theme='light'] .r021-friend-search,
html[data-rift-effective-theme='light'] .r021-header-search {
  background: #fff !important;
  color: var(--text) !important;
  border-color: #d4d9df !important;
}
html[data-rift-effective-theme='light'] input::placeholder,
html[data-rift-effective-theme='light'] textarea::placeholder {
  color: #8b929d !important;
}
html[data-rift-effective-theme='light'] .secondary-button,
html[data-rift-effective-theme='light'] .r021-account-row button,
html[data-rift-effective-theme='light'] .rift-account-row > button {
  background: #f1f3f5 !important;
  color: #343a43 !important;
  border-color: #cfd5dc !important;
}
html[data-rift-effective-theme='light'] .secondary-button:hover:not(:disabled),
html[data-rift-effective-theme='light'] .rift-account-row > button:hover:not(:disabled) {
  background: #e7eaee !important;
}

/* One settings panel, fully themed. */
html[data-rift-effective-theme='light'] #r021-settings {
  background: rgba(227,230,235,.74) !important;
}
html[data-rift-effective-theme='light'] #r021-settings .rift-settings-card,
html[data-rift-effective-theme='light'] #r021-settings .r021-settings-main {
  background: #f7f8fa !important;
  color: var(--text) !important;
}
html[data-rift-effective-theme='light'] #r021-settings .rift-settings-titlebar {
  background: #f4f5f7 !important;
  border-color: #d6dbe1 !important;
  color: var(--text) !important;
}
html[data-rift-effective-theme='light'] #r021-settings .r021-settings-nav-wrap,
html[data-rift-effective-theme='light'] #r021-settings .r021-settings-nav {
  background: #eef0f3 !important;
  border-color: #d6dbe1 !important;
  color: var(--text) !important;
}
html[data-rift-effective-theme='light'] #r021-settings .rift-settings-profile,
html[data-rift-effective-theme='light'] #r021-settings .rift-settings-search input,
html[data-rift-effective-theme='light'] #r021-settings .r021-control-box,
html[data-rift-effective-theme='light'] #r021-settings .rift-unified-info,
html[data-rift-effective-theme='light'] #r021-settings .rift-unified-theme,
html[data-rift-effective-theme='light'] #r021-settings .rift-unified-keybind input,
html[data-rift-effective-theme='light'] #r021-settings .rift-unified-select,
html[data-rift-effective-theme='light'] #r021-settings input,
html[data-rift-effective-theme='light'] #r021-settings textarea,
html[data-rift-effective-theme='light'] #r021-settings select {
  background: #fff !important;
  color: var(--text) !important;
  border-color: #cfd5dc !important;
}
html[data-rift-effective-theme='light'] #r021-settings .r021-settings-label,
html[data-rift-effective-theme='light'] #r021-settings .rift-suite-nav-label,
html[data-rift-effective-theme='light'] #r021-settings .r021-profile-intro,
html[data-rift-effective-theme='light'] #r021-settings .rift-unified-section-copy,
html[data-rift-effective-theme='light'] #r021-settings .rift-unified-note,
html[data-rift-effective-theme='light'] #r021-settings .rift-unified-row > div:first-child > span,
html[data-rift-effective-theme='light'] #r021-settings .rift-unified-radio small,
html[data-rift-effective-theme='light'] #r021-settings .rift-account-row > span,
html[data-rift-effective-theme='light'] #r021-settings .rift-account-link span {
  color: #69717c !important;
}
html[data-rift-effective-theme='light'] #r021-settings h1,
html[data-rift-effective-theme='light'] #r021-settings h2,
html[data-rift-effective-theme='light'] #r021-settings h3,
html[data-rift-effective-theme='light'] #r021-settings strong,
html[data-rift-effective-theme='light'] #r021-settings .rift-unified-row > div:first-child > strong,
html[data-rift-effective-theme='light'] #r021-settings .rift-unified-radio strong,
html[data-rift-effective-theme='light'] #r021-settings .rift-account-row > strong,
html[data-rift-effective-theme='light'] #r021-settings .rift-account-link strong {
  color: var(--text) !important;
}
html[data-rift-effective-theme='light'] #r021-settings .r021-settings-nav > .r021-settings-group > button,
html[data-rift-effective-theme='light'] #r021-settings .r021-settings-nav [data-settings-tab] {
  color: #59616c !important;
}
html[data-rift-effective-theme='light'] #r021-settings .r021-settings-nav [data-settings-tab]:hover {
  background: #e2e5e9 !important;
  color: #252a31 !important;
}
html[data-rift-effective-theme='light'] #r021-settings .r021-settings-nav [data-settings-tab].active {
  background: color-mix(in srgb, var(--accent), transparent 88%) !important;
  color: #252a31 !important;
}
html[data-rift-effective-theme='light'] #r021-settings .rift-unified-section,
html[data-rift-effective-theme='light'] #r021-settings .rift-account-section,
html[data-rift-effective-theme='light'] #r021-settings .r021-settings-section {
  border-color: #d8dde3 !important;
}
html[data-rift-effective-theme='light'] #r021-settings .rift-unified-switch {
  background: #d9dee4 !important;
  border-color: #bcc3cc !important;
}
html[data-rift-effective-theme='light'] #r021-settings .rift-unified-switch > span {
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(34,39,47,.22);
}
html[data-rift-effective-theme='light'] #r021-settings .rift-unified-switch.on {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
html[data-rift-effective-theme='light'] #r021-settings .rift-unified-accents button {
  background: #e5e8ec !important;
}
html[data-rift-effective-theme='light'] #r021-settings .rift-unified-accents button.active {
  border-color: #2f353d !important;
}
html[data-rift-effective-theme='light'] #r021-settings .rift-unified-radio > i {
  border-color: #aeb6c0 !important;
  background: #fff !important;
}
html[data-rift-effective-theme='light'] #r021-settings .rift-unified-radio input:checked + i {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
}
html[data-rift-effective-theme='light'] #r021-settings .rift-unified-meter {
  background: repeating-linear-gradient(90deg, #d8dde3 0 4px, transparent 4px 8px) !important;
}
html[data-rift-effective-theme='light'] #r021-settings .rift-unified-camera {
  background: #e9ecf0 !important;
  border-color: #cfd5dc !important;
}

/* Settings dropdown/sub-section navigation. */
#r021-settings .rift-settings-subnav[data-rift-generated='1'] {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 1px 0 7px 18px;
  padding: 3px 0 3px 13px;
  border-left: 1px solid color-mix(in srgb, var(--accent), transparent 25%);
}
#r021-settings .rift-settings-subnav[data-rift-generated='1'] > button {
  width: 100%;
  min-height: 30px;
  padding: 6px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #9aa1ac;
  text-align: left;
  font-size: 12px;
  line-height: 1.35;
  cursor: pointer;
}
#r021-settings .rift-settings-subnav[data-rift-generated='1'] > button:hover,
#r021-settings .rift-settings-subnav[data-rift-generated='1'] > button.active {
  color: #f0f2f5;
  background: color-mix(in srgb, var(--accent), transparent 92%);
}
html[data-rift-effective-theme='light'] #r021-settings .rift-settings-subnav[data-rift-generated='1'] > button {
  color: #66707b;
}
html[data-rift-effective-theme='light'] #r021-settings .rift-settings-subnav[data-rift-generated='1'] > button:hover,
html[data-rift-effective-theme='light'] #r021-settings .rift-settings-subnav[data-rift-generated='1'] > button.active {
  color: color-mix(in srgb, var(--accent), #222831 35%);
  background: color-mix(in srgb, var(--accent), transparent 91%);
}

/* Keep setting rows and switches aligned at every scale. */
#r021-settings .rift-unified-row,
#r021-settings .r021-setting-row,
#r021-settings .rift-account-row {
  align-items: center !important;
}
#r021-settings .rift-unified-control {
  min-height: 30px;
  align-items: center !important;
}
#r021-settings .rift-unified-switch {
  margin: 0 !important;
  vertical-align: middle;
}
#r021-settings .rift-unified-switch > span {
  pointer-events: none;
}

@media (max-width: 800px) {
  #r021-settings .rift-settings-subnav[data-rift-generated='1'] { margin-left: 10px; padding-left: 10px; }
}