/*
 * Janela de terminal do bloco de código (.retro-code-window) + cores de
 * token do Prism.js, mapeadas pra paleta neon do tema (build do Prism
 * usa tema visual "None" — todo o colorido vem de aqui).
 */

.retro-code-window {
	position: relative;
	margin: 1.75em 0;
	padding: 2.25rem 1.25rem 1.25rem;
	background: #12081f;
	border: var(--mariombn-border-width) solid;
	border-color: #6a3a9a #1a0530 #1a0530 #6a3a9a;
	overflow-x: auto;
	color: var(--mariombn-color-chrome-text);
	font-family: var(--mariombn-font-mono);
	font-size: 0.9rem;
	line-height: 1.6;
	white-space: pre;
	tab-size: 4;
}

.retro-code-window::before {
	content: '~/code.' attr(data-lang);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1.85rem;
	display: flex;
	align-items: center;
	padding: 0 3.25rem 0 0.6rem;
	background: linear-gradient(90deg, #1a0530, #6a3a9a);
	color: #fff;
	font-family: var(--mariombn-font-pixel);
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
	overflow: hidden;
}

.retro-code-window::after {
	content: '_ □ ×';
	position: absolute;
	top: 0;
	right: 0.5rem;
	height: 1.85rem;
	display: flex;
	align-items: center;
	color: #fff;
	font-size: 0.7rem;
	letter-spacing: 0.2rem;
	font-family: var(--mariombn-font-mono);
}

.retro-code-window code {
	display: block;
	background: none;
	white-space: inherit;
	font-family: inherit;
}

/* ---------- Cores de token do Prism ---------- */

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #9a8fb0;
	font-style: italic;
}

.token.punctuation {
	color: #cbb8e8;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: var(--mariombn-color-accent-magenta);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: var(--mariombn-color-accent-lime);
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: var(--mariombn-color-accent-cyan);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: var(--mariombn-color-accent-magenta);
	font-weight: 700;
}

.token.function,
.token.class-name {
	color: var(--mariombn-color-accent-cyan);
}

.token.regex,
.token.important,
.token.variable {
	color: var(--mariombn-color-accent-lime);
}

.token.important,
.token.bold {
	font-weight: 700;
}

.token.italic {
	font-style: italic;
}