/* ═══════════════════════════════════════════════════════════════════════
   rbdev v2: tokens compartilhados (site e ferramentas): cores, fundo aurora e vidro.
   Carregado antes de site.css (páginas novas) e de app-bridge.css (ferramentas em Bootstrap).
   Documentação: docs/DESIGN.md
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────── Tokens ───────── */
:root {
	color-scheme: dark;
	--bg: #060908;
	--ink: #e8efe9;
	--ink-2: #a3b0a7;
	--ink-3: #6f7c74;
	--line: rgb(255 255 255 / .09);
	--accent: #03f96e;
	--accent-2: #5eead4;
	--radius: 22px;
	--ease: cubic-bezier(.2, .8, .2, 1);
	--font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
}

/* ───────── Fundo: aurora, grade e grão ───────── */
.bg {
	position: fixed; inset: 0; z-index: -1; overflow: hidden;
	background:
		radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
		var(--bg);
}
.bg::before {
	content: ''; position: absolute; inset: 0; opacity: .55;
	background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 72px 72px;
	-webkit-mask-image: radial-gradient(70% 60% at 50% 15%, #000, transparent 75%);
	mask-image: radial-gradient(70% 60% at 50% 15%, #000, transparent 75%);
}
.bg i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(90px); will-change: transform; animation: drift 26s ease-in-out infinite alternate; }
.bg i:nth-child(1) { background: var(--accent); top: -18vmax; left: -10vmax; opacity: .2; }
.bg i:nth-child(2) { background: var(--accent-2); right: -16vmax; top: 18vh; opacity: .13; animation-duration: 32s; animation-delay: -8s; }
.bg i:nth-child(3) { background: color-mix(in srgb, var(--accent) 55%, #000); bottom: -24vmax; left: 25%; opacity: .16; animation-duration: 38s; animation-delay: -15s; }
@keyframes drift { to { transform: translate3d(8vmax, 6vmax, 0) scale(1.15); } }
body::after {
	content: ''; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .04;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Barra de progresso de leitura (só onde há scroll-driven animations) */
@supports (animation-timeline: scroll()) {
	body::before {
		content: ''; position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 200;
		background: linear-gradient(90deg, var(--accent), var(--accent-2));
		transform-origin: 0 50%; transform: scaleX(0);
		animation: progress linear both; animation-timeline: scroll(root);
	}
	@keyframes progress { to { transform: scaleX(1); } }
}

/* ───────── Vidro (glassmorphism) ───────── */
.glass {
	position: relative;
	background: linear-gradient(180deg, rgb(255 255 255 / .065), rgb(255 255 255 / .025));
	border: 1px solid var(--line);
	border-radius: var(--radius);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	backdrop-filter: blur(16px) saturate(150%);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 18px 50px -24px rgb(0 0 0 / .8);
}
/* Holofote que segue o mouse (o JS atualiza --mx / --my) */
[data-spot]::before {
	content: ''; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none;
	background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 70%, transparent), transparent 65%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0; transition: opacity .35s;
}
[data-spot]::after {
	content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 11%, transparent), transparent 60%);
	opacity: 0; transition: opacity .35s;
}
[data-spot]:hover::before, [data-spot]:hover::after { opacity: 1; }