/**
 * @name Ethereal
 * @description Deep midnight navy surfaces with warm peach text and a periwinkle accent. Ported from the Omarchy Ethereal theme.
 * @author LittleBit
 * @version 1.0.0
 */

/* Palette tokens (custom, used below) */
:root {
	--eth-bg-0: #040816;
	--eth-bg-1: #060b1e;
	--eth-bg-2: #0a1029;
	--eth-bg-3: #0e1631;
	--eth-bg-4: #131a3a;
	--eth-bg-5: #1a2350;
	--eth-bg-6: #252e56;

	--eth-text: #ffcead;
	--eth-text-2: #ddb99c;
	--eth-text-chat: #e3bfa2;
	--eth-text-muted: #8793c4;
	--eth-text-faint: #6d7db6;

	--eth-accent: #7d82d9;
	--eth-accent-light: #a0a4e8;
	--eth-accent-hover: #9a9fe6;
	--eth-info: #a3bfd1;
	--eth-success: #92a593;
	--eth-warning: #e9bb4f;
	--eth-danger: #ed5b5a;
	--eth-purple: #c89dc1;

	--eth-hover: rgb(125 130 217 / 0.08);
	--eth-selected: rgb(125 130 217 / 0.16);
	--eth-border: rgb(125 130 217 / 0.18);
}

:root,
.theme-dark,
.theme-darker,
.theme-midnight,
.theme-light {
	/* ---------- Legacy background tokens ---------- */
	--background-primary: var(--eth-bg-1);
	--background-secondary: var(--eth-bg-2);
	--background-secondary-alt: var(--eth-bg-4);
	--background-tertiary: var(--eth-bg-0);
	--background-accent: var(--eth-bg-5);
	--background-floating: var(--eth-bg-3);
	--background-nested-floating: var(--eth-bg-2);
	--background-mobile-primary: var(--eth-bg-1);
	--background-mobile-secondary: var(--eth-bg-2);

	--background-modifier-hover: var(--eth-hover);
	--background-modifier-active: rgb(125 130 217 / 0.12);
	--background-modifier-selected: var(--eth-selected);
	--background-modifier-accent: rgb(125 130 217 / 0.2);

	--channeltextarea-background: var(--eth-bg-4);
	--input-background: var(--eth-bg-4);
	--deprecated-card-bg: var(--eth-bg-2);
	--deprecated-store-bg: var(--eth-bg-1);
	--deprecated-quickswitcher-input-background: var(--eth-bg-4);
	--deprecated-text-input-bg: var(--eth-bg-4);
	--deprecated-text-input-border: var(--eth-border);

	/* ---------- Modern (2025+) surface tokens ---------- */
	--background-base-lowest: var(--eth-bg-0);
	--background-base-lower: var(--eth-bg-2);
	--background-base-low: var(--eth-bg-1);
	--background-surface-high: var(--eth-bg-2);
	--background-surface-higher: var(--eth-bg-3);
	--background-surface-highest: var(--eth-bg-4);
	--chat-background-default: var(--eth-bg-1);
	--chat-background: var(--eth-bg-1);
	--modal-background: var(--eth-bg-2);
	--modal-footer-background: var(--eth-bg-3);
	--card-background-default: var(--eth-bg-2);
	--card-background-hover: var(--eth-bg-3);
	--card-primary-bg: var(--eth-bg-2);
	--input-background-default: var(--eth-bg-4);
	--bg-overlay-1: var(--eth-bg-0);
	--bg-overlay-2: var(--eth-bg-2);
	--bg-overlay-3: var(--eth-bg-1);
	--bg-overlay-4: var(--eth-bg-2);
	--bg-overlay-5: var(--eth-bg-3);
	--bg-overlay-6: var(--eth-bg-4);
	--bg-overlay-chat: var(--eth-bg-1);
	--bg-overlay-app-frame: var(--eth-bg-0);

	--background-mod-subtle: var(--eth-hover);
	--background-mod-normal: rgb(125 130 217 / 0.12);
	--background-mod-strong: var(--eth-selected);

	--bg-base-primary: var(--eth-bg-1);
	--bg-base-secondary: var(--eth-bg-2);
	--bg-base-tertiary: var(--eth-bg-0);
	--bg-surface-overlay: var(--eth-bg-3);
	--bg-surface-raised: var(--eth-bg-4);

	/* ---------- Text ---------- */
	--text-normal: var(--eth-text-chat);
	--text-default: var(--eth-text-chat);
	--text-strong: var(--eth-text);
	--text-muted: var(--eth-text-faint);
	--text-subtle: var(--eth-text-faint);
	--text-link: var(--eth-info);
	--text-brand: var(--eth-accent-light);
	--text-positive: var(--eth-success);
	--text-warning: var(--eth-warning);
	--text-danger: var(--eth-danger);
	--text-feedback-critical: var(--eth-danger);
	--text-feedback-positive: var(--eth-success);
	--text-feedback-warning: var(--eth-warning);
	--text-feedback-info: var(--eth-info);
	--header-primary: var(--eth-text);
	--header-secondary: var(--eth-text-2);
	--white-500: #060b1e; /* text on brand buttons */

	--interactive-normal: var(--eth-text-muted);
	--interactive-hover: var(--eth-text-2);
	--interactive-active: var(--eth-text);
	--interactive-muted: var(--eth-text-faint);
	--interactive-icon-default: var(--eth-text-muted);
	--interactive-icon-hover: var(--eth-text-2);
	--interactive-icon-active: var(--eth-text);

	--channels-default: var(--eth-text-muted);
	--channel-icon: var(--eth-text-muted);
	--channel-text-area-placeholder: var(--eth-text-faint);
	--text-input-placeholder: var(--eth-text-faint);

	/* ---------- Accent / brand ---------- */
	--brand-experiment: var(--eth-accent);
	--brand-experiment-05a: rgb(125 130 217 / 0.05);
	--brand-experiment-10a: rgb(125 130 217 / 0.1);
	--brand-experiment-15a: rgb(125 130 217 / 0.15);
	--brand-experiment-20a: rgb(125 130 217 / 0.2);
	--brand-experiment-30a: rgb(125 130 217 / 0.3);
	--brand-experiment-60a: rgb(125 130 217 / 0.6);
	--brand-experiment-100a: var(--eth-accent);
	--brand-360: var(--eth-accent-light);
	--brand-400: var(--eth-accent-light);
	--brand-500: var(--eth-accent);
	--brand-530: var(--eth-accent-hover);
	--brand-560: var(--eth-accent-hover);
	--brand-600: #6a6fc4;
	--brand-630: #5d62b5;
	--brand-660: #5156a6;
	--brand-700: #464a94;
	--focus-primary: var(--eth-accent);
	--control-brand-foreground: var(--eth-accent);
	--control-brand-foreground-new: var(--eth-accent);
	--mention-foreground: #c2c4f0;
	--mention-background: rgb(125 130 217 / 0.22);

	/* ---------- Borders ---------- */
	--border-subtle: var(--eth-border);
	--border-normal: rgb(125 130 217 / 0.28);
	--border-strong: rgb(125 130 217 / 0.4);
	--border-faint: rgb(125 130 217 / 0.1);
	--divider-subtle: var(--eth-border);

	/* ---------- Buttons ---------- */
	--button-filled-brand-background: var(--eth-accent);
	--button-filled-brand-background-hover: var(--eth-accent-hover);
	--button-filled-brand-background-active: var(--eth-accent-light);
	--button-filled-brand-text: #060b1e;
	--button-secondary-background: var(--eth-bg-5);
	--button-secondary-background-hover: var(--eth-bg-6);
	--button-secondary-background-active: var(--eth-bg-6);
	--button-secondary-text: var(--eth-text-2);
	--button-outline-brand-border: var(--eth-accent);
	--button-outline-brand-text: var(--eth-accent-light);
	--button-danger-background: #d94c4b;
	--button-danger-background-hover: var(--eth-danger);
	--button-danger-background-active: var(--eth-danger);
	--button-danger-text: #fff0e4;

	/* ---------- Status ---------- */
	--status-online: var(--eth-success);
	--status-idle: var(--eth-warning);
	--status-dnd: var(--eth-danger);
	--status-offline: #3a4470;
	--status-positive: var(--eth-success);
	--status-positive-background: var(--eth-success);
	--status-warning: var(--eth-warning);
	--status-warning-background: var(--eth-warning);
	--status-warning-text: #060b1e;
	--status-danger: var(--eth-danger);
	--status-danger-background: var(--eth-danger);
	--green-360: var(--eth-success);
	--yellow-300: var(--eth-warning);
	--red-400: var(--eth-danger);

	/* ---------- Scrollbars ---------- */
	--scrollbar-thin-thumb: rgb(125 130 217 / 0.28);
	--scrollbar-thin-track: transparent;
	--scrollbar-auto-thumb: rgb(125 130 217 / 0.28);
	--scrollbar-auto-track: transparent;
	--scrollbar-auto-scrollbar-color-thumb: rgb(125 130 217 / 0.28);
	--scrollbar-auto-scrollbar-color-track: transparent;

	/* ---------- Misc ---------- */
	--spoiler-hidden-background: var(--eth-bg-5);
	--spoiler-hidden-background-hover: var(--eth-bg-6);
	--user-profile-background-hover: var(--eth-bg-3);
	--profile-gradient-card-background: var(--eth-bg-2);
	--profile-gradient-overlay-color: rgb(6 11 30 / 0.6);
	--guild-header-text-shadow: none;
	--elevation-low: 0 1px 0 rgb(0 0 0 / 0.3);
}

/* Text selection */
::selection {
	background: rgb(125 130 217 / 0.35);
}

/* Inline code & code blocks */
.markup_f8f345 code,
[class*="markup"] code,
code.inline,
pre code,
[class*="codeContainer"],
[class*="codeBlockText"] {
	background: #030610 !important;
	color: var(--eth-text-chat);
	border-color: var(--eth-border) !important;
}

/* @everyone / @here */
[class*="mention"][class*="everyone"],
[class*="mention"][class*="here"] {
	background: rgb(233 187 79 / 0.18);
	color: var(--eth-warning);
}

/* Message timestamps */
[class*="timestamp"] {
	color: var(--eth-text-faint);
}