/* =========================
   THEME TOKENS
   ========================= */

/* Светлая тема (по умолчанию) */
:root {
	/* Text */
	--text: rgb(0, 0, 0);
	--text-send: rgb(0, 127, 255);
	--text-inverted: rgb(255, 255, 255);
	--placeholder: rgb(127, 127, 127);

	/* Backgrounds */
	--bg-header: rgb(180, 215, 215);
	--surface: rgb(180, 215, 215);
	--bg-create: rgb(255, 255, 255);
	--bg-message-assistant: rgba(255, 255, 255, 0.7);
	--bg-message-user: rgba(174, 255, 178, 0.7);
	--bg-swipe: rgba(86, 162, 255, 0.5);
	--bg-swipe-delete: rgba(255, 0, 0, 0.5);
	--bg-thinking: rgb(0, 0, 0);

	/* Borders */
	--border: rgb(221, 221, 221);
	--border-message: rgb(255, 255, 255);
	--border-message-input-focus: rgb(255, 255, 255);

	/* Links */
	--link: #0066cc;
	--link-visited: #551a8b;

	/* Gradients */
	--gradient-start: rgb(180, 230, 200);
	--gradient-end: rgb(180, 200, 230);

	/* States */
	--hover-item: color-mix(in srgb, var(--bg-header) 95%, black 5%);
	--hover-button: color-mix(in srgb, var(--bg-header) 95%, black 5%);
	--overlay: rgba(0, 0, 0, 0.8);

	/* Shadows */
	--shadow: rgba(0, 0, 0, 0.4);
}

/* =========================
   SYSTEM DARK THEME
   ========================= */
@media (prefers-color-scheme: dark) {
	:root {
		/* Text */
		--text: rgba(255, 255, 255, 0.9);
		--text-send: rgb(0, 225, 255);
		--text-inverted: rgb(255, 255, 255);
		--placeholder: rgb(160, 160, 160);
	
		/* Backgrounds */
		--bg-header: rgb(25, 70, 70);
		--surface: rgb(25, 70, 70);
		--bg-create: rgb(255, 255, 255);
		--bg-message-assistant: rgba(64, 64, 64, 0.8);
		--bg-message-user: rgba(0, 96, 0, 0.8);
		--bg-swipe: rgba(86, 162, 255, 0.5);
		--bg-swipe-delete: rgba(255, 0, 0, 0.5);
		--bg-thinking: rgb(255, 255, 255);
	
		/* Borders */
		--border: rgb(180, 180, 180);
		--border-message: rgb(180, 180, 180);
		--border-message-input-focus: rgb(255, 255, 255);
	
		/* Links */
		--link: rgb(77, 163, 255);
		--link-visited: rgb(194, 153, 255);
	
		/* Gradients */
		--gradient-start: rgb(25, 80, 60);
		--gradient-end: rgb(25, 60, 80);
	
		/* States */
		--hover-item: color-mix(in srgb, var(--bg-header) 80%, white 20%);
		--hover-button: color-mix(in srgb, var(--bg-header) 80%, white 20%);
		--overlay: rgba(0, 0, 0, 0.8);
	
		/* Shadows */
		--shadow: rgba(255, 255, 255, 0.4);
	}
}

/* =========================
   MANUAL OVERRIDES
   ========================= */
:root[data-theme="light"] {
	/* Text */
	--text: rgb(0, 0, 0);
	--text-send: rgb(0, 127, 255);
	--text-inverted: rgb(255, 255, 255);
	--placeholder: rgb(127, 127, 127);

	/* Backgrounds */
	--bg-header: rgb(180, 215, 215);
	--surface: rgb(180, 215, 215);
	--bg-create: rgb(255, 255, 255);
	--bg-message-assistant: rgba(255, 255, 255, 0.7);
	--bg-message-user: rgba(174, 255, 178, 0.7);
	--bg-swipe: rgba(86, 162, 255, 0.5);
	--bg-swipe-delete: rgba(255, 0, 0, 0.5);
	--bg-thinking: rgb(0, 0, 0);

	/* Borders */
	--border: rgb(180, 180, 180);
	--border-message: rgb(255, 255, 255);
	--border-message-input-focus: rgb(255, 255, 255);

	/* Links */
	--link: #0066cc;
	--link-visited: #551a8b;

	/* Gradients */
	--gradient-start: rgb(180, 230, 200);
	--gradient-end: rgb(180, 200, 230);

	/* States */
	--hover-item: color-mix(in srgb, var(--bg-header) 95%, black 5%);
	--hover-button: color-mix(in srgb, var(--bg-header) 95%, black 5%);
	--overlay: rgba(0, 0, 0, 0.8);

	/* Shadows */
	--shadow: rgba(0, 0, 0, 0.4);
}

:root[data-theme="dark"] {
	/* Text */
	--text: rgba(255, 255, 255, 0.9);
	--text-send: rgb(0, 225, 255);
	--text-inverted: rgb(255, 255, 255);
	--placeholder: rgb(160, 160, 160);

	/* Backgrounds */
	--bg-header: rgb(30, 90, 90);
	--surface: rgb(30, 90, 90);
	--bg-create: rgb(255, 255, 255);
	--bg-message-assistant: rgba(64, 64, 64, 0.8);
	--bg-message-user: rgba(0, 96, 0, 0.8);
	--bg-swipe: rgba(86, 162, 255, 0.5);
	--bg-swipe-delete: rgba(255, 0, 0, 0.5);
	--bg-thinking: rgb(255, 255, 255);

	/* Borders */
	--border: rgb(180, 180, 180);
	--border-message: rgb(180, 180, 180);
	--border-message-input-focus: rgb(255, 255, 255);

		/* Links */
		--link: rgb(77, 163, 255);
		--link-visited: rgb(194, 153, 255);

	/* Gradients */
	--gradient-start: rgb(30, 100, 80);
	--gradient-end: rgb(30, 80, 100);

	/* States */
	--hover-item: color-mix(in srgb, var(--bg-header) 80%, white 20%);
	--hover-button: color-mix(in srgb, var(--bg-header) 80%, white 20%);
	--overlay: rgba(0, 0, 0, 0.8);

	/* Shadows */
	--shadow: rgba(255, 255, 255, 0.4);
}