/* SyncWeave's Cybergrid, Automaton and Premier palettes, translated to Parley's
   components. This is a skin only: no resets, layout changes, remote fonts or media
   overlays. Source secondary text becomes muted text; disabled text stays faint. */
:root[data-theme="cybergrid"] {
  --bg-rail: #050508;
  --bg-sidebar: #0a0a14;
  --bg-chat: #050508;
  --bg-input: #0f0f1e;
  --bg-hover: #0f0f1e;
  --bg-active: #141428;
  --bg-mention: rgba(255, 102, 0, 0.1);
  --border: rgba(0, 223, 252, 0.2);
  --text: #c0e8f0;
  --text-muted: #6ec8d8;
  --text-strong: #e3faff;
  --text-faint: #4f99a9;
  --accent: #00dffc;
  --accent-hover: #6ceeff;
  --danger: #f87171;
  --online: #6fdfa0;
  --link: #3f9cff; /* blue, apart from the cyan body text: message links are not underlined until hovered */
  --bg-panel: #0a0e14;
  --warning: #ff6600;
  --status-idle: #ff6600;
  --status-offline: #4f99a9;
  --mention-bg: rgba(0, 223, 252, 0.12);
  --mention-text: #6ec8d8;
  --overlay-subtle: rgba(0, 223, 252, 0.08);
  --spoiler-hidden: #262645;
  --spoiler-hidden-hover: #33335c;
  --auth-glow: #0a2a35;
  --radius: 8px;
  --sw-ink: #050508;
  --sw-rgb: 0, 223, 252;
  --sw-edge-rgb: 0, 223, 252;
  --sw-secondary: #ff6600;
  --sw-header: linear-gradient(90deg, #050510, #0a1520);
  --sw-display-font: 'Orbitron', 'Share Tech Mono', monospace;
  --sw-tracking: 0.02em;
  color-scheme: dark;
}

:root[data-theme="automaton"] {
  --bg-rail: #080806;
  --bg-sidebar: #12120e;
  --bg-chat: #080806;
  --bg-input: #1c1c16;
  --bg-hover: #1c1c16;
  --bg-active: #26261e;
  --bg-mention: rgba(212, 175, 55, 0.1);
  --border: rgba(212, 175, 55, 0.2);
  --text: #f0e6c8;
  --text-muted: #b8a472;
  --text-strong: #fff6d9;
  --text-faint: #93845a;
  --accent: #d4af37;
  --accent-hover: #e9ca68;
  --danger: #f87171;
  --online: #9bd193;
  --link: #d4af37;
  --bg-panel: #0d0d08;
  --warning: #d4af37;
  --status-idle: #d4af37;
  --status-offline: #93845a;
  --mention-bg: rgba(212, 175, 55, 0.12);
  --mention-text: #e9ca68;
  --overlay-subtle: rgba(212, 175, 55, 0.08);
  --spoiler-hidden: #2a2a20;
  --spoiler-hidden-hover: #3b3627;
  --auth-glow: #2a2210;
  --radius: 8px;
  --sw-ink: #080806;
  --sw-rgb: 212, 175, 55;
  --sw-edge-rgb: 212, 175, 55;
  --sw-secondary: #c0c0c0;
  --sw-header: linear-gradient(90deg, #0d0d04, #1a1508);
  --sw-display-font: 'Rajdhani', 'Share Tech Mono', sans-serif;
  --sw-tracking: 0.03em;
  color-scheme: dark;
}

:root[data-theme="premier"] {
  --bg-rail: #0a0812;
  --bg-sidebar: #12101e;
  --bg-chat: #0a0812;
  --bg-input: #1a1628;
  --bg-hover: #1a1628;
  --bg-active: #221e32;
  --bg-mention: rgba(196, 149, 58, 0.1);
  --border: rgba(123, 104, 238, 0.2);
  --text: #d8d4e4;
  --text-muted: #9a94b0;
  --text-strong: #eeebf5;
  --text-faint: #857f9d;
  --accent: #c4953a;
  --accent-hover: #dfb35c;
  --danger: #f87171;
  --online: #96c9a6;
  --link: #c4953a;
  --bg-panel: #0e0c18;
  --warning: #c4953a;
  --status-idle: #c4953a;
  --status-offline: #857f9d;
  --mention-bg: rgba(123, 104, 238, 0.14);
  --mention-text: #b8b8cc;
  --overlay-subtle: rgba(123, 104, 238, 0.08);
  --spoiler-hidden: #2a2540;
  --spoiler-hidden-hover: #3a3354;
  --auth-glow: #241a38;
  --radius: 8px;
  --sw-ink: #0a0812;
  --sw-rgb: 196, 149, 58;
  --sw-edge-rgb: 123, 104, 238;
  --sw-secondary: #7b68ee;
  --sw-header: linear-gradient(90deg, #0a0812, #12101e);
  --sw-display-font: 'Bebas Neue', 'Share Tech Mono', sans-serif;
  --sw-tracking: 0.06em;
  color-scheme: dark;
}

/* Display faces identify the surrounding interface. Conversation text, timestamps,
   long settings explanations and editable text retain their case and familiar metrics;
   Bebas Neue in particular only provides uppercase-shaped Latin glyphs. */
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) :is(
  .titlebar-drag, .sidebar-header, .channel, .channel-category, .member-group,
  .chat-header .channel-title, .friends-title, .friends-heading, .friends-tab,
  .settings-nav, .settings-content h2, .settings-content h3, .modal h2,
  .auth-card h1, .channel-start h2, .call-join h2, .pins-header h3, .inbox-title h3,
  .search-panel-header h3, button.primary, a.download-button
) { font-family: var(--sw-display-font); letter-spacing: var(--sw-tracking); }
:root[data-theme="cybergrid"] :is(.channel, .sidebar-header, .friends-tab, button.primary, a.download-button) { font-size: 12px; }
:root[data-theme="cybergrid"] :is(.channel-category, .member-group, .settings-nav .profile-section-title) { font-size: 10px; }
:root[data-theme="cybergrid"] .settings-nav button { font-size: 12px; }
:root[data-theme="automaton"] :is(.channel, .sidebar-header, .chat-header .channel-title, .settings-nav button, .friends-tab, button.primary, a.download-button) { font-size: 17px; font-weight: 600; }
:root[data-theme="premier"] :is(.channel, .sidebar-header, .chat-header .channel-title, .settings-nav button, .friends-tab, button.primary, a.download-button) { font-size: 18px; font-weight: 400; }
:root[data-theme="premier"] :is(.channel-category, .member-group, .friends-heading) { font-size: 14px; font-weight: 400; }
:root[data-theme="premier"] :is(.settings-content h2, .modal h2, .channel-start h2, .auth-card h1) { font-weight: 400; }

:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) ::selection { color: var(--sw-ink); background: var(--accent); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) :is(input, textarea)::placeholder { color: var(--text-muted); opacity: 1; }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--accent); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) :focus-visible { outline-color: var(--accent); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) :is(input, select, textarea):focus {
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(var(--sw-rgb), 0.3), 0 0 0 1px var(--accent);
}
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .composer textarea:focus { box-shadow: none; }

/* Match the reference's faint panel glow and luminous outlines without changing
   border-box dimensions or stacking above the optional atmosphere canvas. */
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) :is(
  .auth-card, .settings, .modal, .quick-switcher, .context-menu, .profile-card,
  .status-menu, .poll, .file-card, .search-result, .pin-item, .inbox-item,
  .active-now-card, .incoming-call, .transfers-panel, .emoji-picker, .pins-popout, .inbox-popout
) { box-shadow: 0 0 8px rgba(var(--sw-rgb), 0.06), 0 0 1px rgba(var(--sw-edge-rgb), 0.15), inset 0 0 0 1px rgba(var(--sw-edge-rgb), 0.12); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) :is(.sidebar-header, .chat-header, .search-panel-header) { background: var(--sw-header); border-bottom-color: rgba(var(--sw-edge-rgb), 0.15); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) :is(.guild-rail, .sidebar, .settings-nav) { box-shadow: inset -1px 0 0 rgba(var(--sw-edge-rgb), 0.12); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .member-list { box-shadow: inset 1px 0 0 rgba(var(--sw-edge-rgb), 0.12); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) :is(.channel-category, .member-group, .settings-content h2, .settings-content h3, .channel-start h2, .auth-card h1) { color: var(--accent); text-shadow: 0 0 6px rgba(var(--sw-rgb), 0.3); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .channel.active,
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .settings-nav button.active { box-shadow: inset 2px 0 0 var(--accent), 0 0 12px rgba(var(--sw-rgb), 0.08); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .guild-icon::before { background: var(--accent); box-shadow: 0 0 6px rgba(var(--sw-rgb), 0.3); }

/* SyncWeave's primary actions are transparent, coloured outlines, not filled pills.
   The generic button glow and transition are defaults only: :where() keeps them at a bare
   `button`'s specificity, so any component's own box-shadow (the active channel's accent bar,
   drag-and-drop markers) or transition (the server icon's shape change) still wins. */
:where(:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"])) button { transition: box-shadow 0.2s ease, border-color 0.2s ease; }
:where(:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"])) button:where(:hover:not(:disabled)) { box-shadow: 0 0 12px rgba(var(--sw-rgb), 0.25), 0 0 4px rgba(var(--sw-edge-rgb), 0.3); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) :is(button.primary, a.download-button) {
  background: transparent;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 8px rgba(var(--sw-rgb), 0.3), inset 0 0 8px rgba(var(--sw-rgb), 0.05);
}
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) :is(button.primary:hover, a.download-button:hover) {
  background: rgba(var(--sw-rgb), 0.1);
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 16px rgba(var(--sw-rgb), 0.3), 0 0 4px var(--accent), inset 0 0 12px rgba(var(--sw-rgb), 0.08);
}
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) :is(.composer, .reply-bar) { box-shadow: inset 0 0 0 1px rgba(var(--sw-edge-rgb), 0.2); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .composer:focus-within { box-shadow: inset 0 0 0 1px var(--accent), 0 0 8px rgba(var(--sw-rgb), 0.3); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .content a:hover { text-shadow: 0 0 8px rgba(var(--sw-rgb), 0.35); }
/* These palettes share one colour for the rail and the chat, so message surfaces that Dark
   draws in --bg-rail or --bg-sidebar (inline code, code blocks, embeds) get a lifted fill and
   the luminous outline the cards use; quote and embed bars use the edge colour. */
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .content code { background: var(--bg-active); box-shadow: inset 0 0 0 1px rgba(var(--sw-edge-rgb), 0.18); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .content pre { background: var(--bg-sidebar); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .content pre code { background: none; box-shadow: none; }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .embed:not(.bare) { box-shadow: inset 0 0 0 1px rgba(var(--sw-edge-rgb), 0.14); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) :is(.embed:not(.bare), .content blockquote) { border-left-color: rgba(var(--sw-edge-rgb), 0.45); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .message:hover,
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .message.menu-target { background: rgba(var(--sw-rgb), 0.035); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .message.mentioned,
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .message.mentioned:hover { background: var(--bg-mention); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) :is(.reaction.me, .poll-answer.choice.selected, .message.reply-target) { background: var(--mention-bg); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .poll-answer.mine .poll-bar { background: rgba(var(--sw-rgb), 0.18); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .search-highlight { background: rgba(var(--sw-rgb), 0.2); color: var(--text-strong); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .drop-overlay { background: var(--bg-rail); opacity: 0.96; }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .drop-card { border-color: var(--accent); color: var(--text-strong); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .drop-card .muted { color: var(--text-muted); }

/* The remaining solid status/selection fills need dark ink. Do not target arbitrary
   avatars or role swatches; only the synthetic Appearance preview uses the accent. */
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) :is(
  .guild-icon:hover, .guild-icon.active, .guild-icon.update-ready, .guild-icon.action:hover,
  .guild-icon.home-button.active, .guild-icon.home-button:hover,
  .context-menu-item:focus:not(.disabled), .context-menu-check.on,
  .status-option:hover, .status-option:hover .small, .attach-menu .status-option:hover .icon,
  .spacing-options button[aria-checked="true"], .transfers-count, .timeout-preset.selected,
  .jump-bar, .jump-bar .jump-present, .unread-bar, .unread-bar button, a.app-link:hover,
  .content .mention.clickable:hover, .content .mention.clickable:focus-visible,
  .pin-jump:hover, .inbox-jump:hover, .search-jump:hover,
  .search-page-button:hover:not(:disabled), .poll-view:hover, .poll-answer.selected .poll-check,
  .friends-tab.friends-tab-add:not(.active), .dm-join-call, .dm-join-call .icon,
  .incoming-call-button.accept, .invite-card-join:not(.joined, :disabled), .tri-option.allow.selected,
  .server-icon-preview, .call-popout-avatar, .appearance-preview .avatar,
  .danger-button, .guild-admin-modal .modal-actions button.danger-button,
  .attachment-modal .modal-actions button.danger-button, .context-menu-item.danger:focus,
  .titlebar-controls button.close:hover, .connection-banner, .pending .remove,
  .live-badge, .call-bar button.active-off, .call-bar button.hangup,
  .call-popout-bar button.active-off, .call-popout-bar button.hangup,
  .member .mod-actions button.danger:hover, .incoming-call-button.decline,
  .voice-chat-button .mention-badge, .channel-mention-badge, .guild-mention-badge,
  .rail-badge, .inbox-badge, .qs-badge, .new-messages-divider span,
  .tri-option.deny.selected, .ban-row button.revoke-ban:hover
) { color: var(--sw-ink); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .context-menu-item:focus .context-menu-check { border-color: currentColor; }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .context-menu-item:focus .context-menu-check.on { background: var(--sw-ink); color: var(--accent); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .switch-input:checked + .switch::after { background: var(--sw-ink); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .call-bar button.on { background: var(--accent); color: var(--sw-ink); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .tile:not(.speaking) { box-shadow: 0 0 0 1px var(--border); }

/* Source six-pixel scrollbars and warm/cool thumb colours. */
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) ::-webkit-scrollbar { width: 6px; height: 6px; }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) ::-webkit-scrollbar-track { background: var(--bg-rail); }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) ::-webkit-scrollbar-thumb { background: rgba(var(--sw-edge-rgb), 0.2); border-radius: 3px; }
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) ::-webkit-scrollbar-thumb:hover { background: rgba(var(--sw-edge-rgb), 0.4); }

/* Atmosphere stays in the chrome, leaving the message and video surfaces untouched.
   Automaton's brushed metal and concentric machined rings provide its own signature. */
:root[data-theme="cybergrid"] .auth {
  background-color: var(--bg-rail);
  background-image: radial-gradient(ellipse at 50% 40%, rgba(0, 223, 252, 0.1), transparent 65%), linear-gradient(rgba(0, 223, 252, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 223, 252, 0.045) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}
:root[data-theme="automaton"] :is(.guild-rail, .sidebar, .member-list, .settings-nav) {
  background-image: linear-gradient(105deg, transparent 30%, rgba(192, 192, 192, 0.025) 50%, transparent 70%), repeating-linear-gradient(0deg, rgba(212, 175, 55, 0.018) 0 1px, transparent 1px 4px);
}
:root[data-theme="automaton"] .auth {
  background-color: var(--bg-rail);
  background-image: radial-gradient(circle at 50% 48%, transparent 0 290px, rgba(212, 175, 55, 0.13) 291px 292px, transparent 293px 325px, rgba(192, 192, 192, 0.1) 326px 327px, transparent 328px 360px, rgba(212, 175, 55, 0.06) 361px 362px, transparent 363px), radial-gradient(ellipse at 50% 40%, rgba(212, 175, 55, 0.1), transparent 65%), repeating-linear-gradient(0deg, rgba(192, 192, 192, 0.018) 0 1px, transparent 1px 4px);
}
:root[data-theme="automaton"] :is(.channel-start, .voice-panel) { box-shadow: inset 0 -1px 0 rgba(192, 192, 192, 0.12); }
:root[data-theme="automaton"] .channel-start h2 { color: #c0c0c0; text-shadow: 0 0 12px rgba(212, 175, 55, 0.2); }
:root[data-theme="automaton"] .auth-card { box-shadow: inset 0 1px 0 rgba(192, 192, 192, 0.4), inset 0 -1px 0 rgba(212, 175, 55, 0.35), 0 0 28px rgba(212, 175, 55, 0.08); }
:root[data-theme="premier"] .auth {
  background-color: var(--bg-rail);
  background-image: radial-gradient(ellipse at 20% 30%, rgba(123, 104, 238, 0.11), transparent 60%), radial-gradient(circle at 78% 68%, transparent 0 130px, rgba(196, 149, 58, 0.07) 131px 132px, transparent 133px 156px, rgba(123, 104, 238, 0.1) 157px 158px, transparent 159px 184px, rgba(196, 149, 58, 0.06) 185px 186px, transparent 187px);
}
:root[data-theme="premier"] :is(.sidebar, .member-list) { background-image: linear-gradient(180deg, rgba(123, 104, 238, 0.035), transparent 55%); }

/* Keep the source glow feel without page-wide flicker or animated text. Existing
   message-jump feedback also follows the active palette and resolved motion setting. */
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"]) .message.jump-flash { animation-name: syncweave-message-jump; }
@keyframes syncweave-message-jump {
  0%, 30% { background: rgba(var(--sw-rgb), 0.16); }
  100% { background: transparent; }
}
:root:is([data-theme="cybergrid"], [data-theme="automaton"], [data-theme="premier"])[data-reduced-motion="reduce"] .message.jump-flash { animation: none; background: rgba(var(--sw-rgb), 0.1); }