/*
 * Identidade do Korok no Element Web. O nginx do Element injeta este arquivo
 * no <head> do index.html (element-nginx.conf.template), servido em
 * /korok/korok.css pelo proxy do próprio container.
 *
 * Troca só tokens base do Compound (--cpd-*), então os temas nativos
 * "light" e "dark" continuam acompanhando o sistema. Fica fora de @layer para
 * vencer as camadas do Element. Os temas de alto contraste ficam intactos.
 *
 * - gray-*: escala slate do Korok (components/theme).
 * - green-*: o Element usa a escala verde como destaque (botões, bolhas,
 *   reações); aqui ela vira o cyan do Korok. Os tokens de sucesso voltam
 *   ao verde explicitamente.
 */

@font-face {
	font-display: swap;
	font-family: Urbanist;
	font-style: normal;
	font-weight: 100 900;
	src: url('fonts/Urbanist.woff2') format('woff2');
}

:root,
[class*='cpd-theme-'] {
	--cpd-font-heading-sm-semibold:
		var(--cpd-font-weight-semibold) var(--cpd-font-size-heading-sm) /
			var(--cpd-font-line-height-tight) Urbanist,
		var(--cpd-font-family-sans);
	--cpd-font-heading-md-semibold:
		var(--cpd-font-weight-semibold) var(--cpd-font-size-heading-md) /
			var(--cpd-font-line-height-tight) Urbanist,
		var(--cpd-font-family-sans);
	--cpd-font-heading-lg-semibold:
		var(--cpd-font-weight-semibold) var(--cpd-font-size-heading-lg) /
			var(--cpd-font-line-height-tight) Urbanist,
		var(--cpd-font-family-sans);
	--cpd-font-heading-xl-semibold:
		var(--cpd-font-weight-semibold) var(--cpd-font-size-heading-xl) /
			var(--cpd-font-line-height-tight) Urbanist,
		var(--cpd-font-family-sans);
}

.cpd-theme-light {
	--cpd-color-theme-bg: #ffffff;

	--cpd-color-gray-100: #f8fafc;
	--cpd-color-gray-200: #f5f7fa;
	--cpd-color-gray-300: #f1f5f9;
	--cpd-color-gray-400: #e2e8f0;
	--cpd-color-gray-500: #cbd5e1;
	--cpd-color-gray-600: #b4c0cf;
	--cpd-color-gray-700: #94a3b8;
	--cpd-color-gray-800: #7a8ba1;
	--cpd-color-gray-900: #64748b;
	--cpd-color-gray-1000: #475569;
	--cpd-color-gray-1100: #334155;
	--cpd-color-gray-1200: #1e293b;
	--cpd-color-gray-1300: #0f172a;
	--cpd-color-gray-1400: #020817;

	--cpd-color-green-100: #f5feff;
	--cpd-color-green-200: #ecfeff;
	--cpd-color-green-300: #dffcfe;
	--cpd-color-green-400: #cffafe;
	--cpd-color-green-500: #a5f3fc;
	--cpd-color-green-600: #67e8f9;
	--cpd-color-green-700: #22d3ee;
	--cpd-color-green-800: #06b6d4;
	--cpd-color-green-900: #0891b2;
	--cpd-color-green-1000: #0e7490;
	--cpd-color-green-1100: #155e75;
	--cpd-color-green-1200: #164e63;
	--cpd-color-green-1300: #0c4054;
	--cpd-color-green-1400: #083344;

	--cpd-color-bg-accent-selected: rgb(8 145 178 / 12%);
	--cpd-color-bg-action-primary-rest: var(--cpd-color-green-900);
	--cpd-color-bg-action-primary-hovered: var(--cpd-color-green-1000);
	--cpd-color-bg-action-primary-pressed: var(--cpd-color-green-1100);
	--cpd-color-border-focused: var(--cpd-color-green-900);

	--cpd-color-bg-success-subtle: #f0fdf4;
	--cpd-color-border-success-subtle: #86efac;
	--cpd-color-icon-success-primary: #16a34a;
	--cpd-color-text-success-primary: #15803d;
}

.cpd-theme-dark {
	--cpd-color-theme-bg: #020817;

	--cpd-color-gray-100: #050d1d;
	--cpd-color-gray-200: #091224;
	--cpd-color-gray-300: #0f172a;
	--cpd-color-gray-400: #1e293b;
	--cpd-color-gray-500: #273449;
	--cpd-color-gray-600: #334155;
	--cpd-color-gray-700: #3f4d63;
	--cpd-color-gray-800: #64748b;
	--cpd-color-gray-900: #94a3b8;
	--cpd-color-gray-1000: #a8b5c7;
	--cpd-color-gray-1100: #cbd5e1;
	--cpd-color-gray-1200: #d8e0ea;
	--cpd-color-gray-1300: #e2e8f0;
	--cpd-color-gray-1400: #f8fafc;

	--cpd-color-green-100: #041a24;
	--cpd-color-green-200: #05202b;
	--cpd-color-green-300: #062a38;
	--cpd-color-green-400: #083344;
	--cpd-color-green-500: #0c4054;
	--cpd-color-green-600: #164e63;
	--cpd-color-green-700: #155e75;
	--cpd-color-green-800: #0e7490;
	--cpd-color-green-900: #0891b2;
	--cpd-color-green-1000: #06b6d4;
	--cpd-color-green-1100: #22d3ee;
	--cpd-color-green-1200: #67e8f9;
	--cpd-color-green-1300: #a5f3fc;
	--cpd-color-green-1400: #cffafe;

	/* O Element põe texto branco fixo sobre o destaque (green-900 e
	   text-action-accent, o $accent legado), então ele fica no cyan médio;
	   ícones, bordas e botões primários usam o cyan claro do Korok. */
	--cpd-color-bg-accent-selected: rgb(34 211 238 / 15%);
	--cpd-color-bg-action-primary-rest: var(--cpd-color-green-1100);
	--cpd-color-bg-action-primary-hovered: var(--cpd-color-green-1200);
	--cpd-color-bg-action-primary-pressed: var(--cpd-color-green-1300);
	--cpd-color-border-accent-primary: var(--cpd-color-green-1100);
	--cpd-color-border-focused: var(--cpd-color-green-1100);
	--cpd-color-icon-accent-primary: var(--cpd-color-green-1100);

	--cpd-color-bg-success-subtle: #052e16;
	--cpd-color-border-success-subtle: #166534;
	--cpd-color-icon-success-primary: #4ade80;
	--cpd-color-text-success-primary: #4ade80;
}

/* O logo da Home vem de branding.auth_header_logo_url, que é o preto. */
.cpd-theme-dark .mx_HomePage_default_wrapper > img {
	content: url('https://bessa.digital/logo-bessa-branca.png');
}

/* Presença online: o Element usa a cor de destaque (agora cyan); volta ao verde. */
.mx_RoomAvatarView_PresenceDecoration[color='var(--cpd-color-icon-accent-primary)'],
.mx_PresenceIconView .mx_PresenceIconView_online {
	color: var(--cpd-color-icon-success-primary);
}

.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_online::before {
	background-color: var(--cpd-color-icon-success-primary);
}

/*
 * Diálogos no formato do Modal do Mantine do Korok: caixa com 8px de raio,
 * borda e sombra xl, padding de 16px, título de 16px, botão de fechar de
 * 28px e overlay preto a 55% com desfoque de 3px (components/theme).
 */
.mx_Dialog_background {
	background-color: rgb(0 0 0 / 55%);
	backdrop-filter: blur(3px);
}

.mx_Dialog_border {
	padding: 0;
	background: none;
	border-radius: 8px;
	backdrop-filter: none;
	box-shadow:
		0 1px 3px rgb(0 0 0 / 5%),
		0 36px 28px -7px rgb(0 0 0 / 5%),
		0 17px 17px -7px rgb(0 0 0 / 4%);
}

.mx_Dialog_border .mx_Dialog {
	padding: 16px;
	border: 1px solid var(--cpd-color-gray-400);
	border-radius: 8px;
}

.mx_Dialog .mx_Dialog_title {
	padding-right: 36px;
	font: var(--cpd-font-weight-regular) 16px / 28px var(--cpd-font-family-sans);
	letter-spacing: -0.025em;
}

.mx_Dialog .mx_Dialog_cancelButton {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--cpd-color-icon-secondary);
	background: none;
	border-radius: 8px;
}

.mx_Dialog .mx_Dialog_cancelButton:hover {
	background-color: var(--cpd-color-bg-subtle-secondary);
}

.mx_Dialog .mx_Dialog_cancelButton svg {
	width: 18px;
	height: 18px;
}

.mx_Dialog .mx_LegacyDialogButton {
	min-height: 36px;
	padding: 0 18px;
	font: var(--cpd-font-weight-semibold) 14px / 1 var(--cpd-font-family-sans);
	border-radius: 8px;
}