/* LED Cloud — tokens de tema. A escala "slate" do Tailwind é ligada a variáveis (ver theme.js). */
:root {
    --slate-50: 248 250 252; --slate-100: 241 245 249; --slate-200: 226 232 240; --slate-300: 203 213 225;
    --slate-400: 148 163 184; --slate-500: 100 116 139; --slate-600: 71 85 105; --slate-700: 51 65 85;
    --slate-800: 30 41 59; --slate-900: 15 23 42;
    --surface: #ffffff; --surface-glass: rgba(255, 255, 255, .85); --line: rgba(15, 23, 42, .08);
    --grid: rgba(15, 23, 42, .05); --glow: rgba(6, 182, 212, .25);
}
html.dark {
    --slate-50: 11 17 32; --slate-100: 17 26 46; --slate-200: 30 41 66; --slate-300: 48 63 92;
    --slate-400: 100 116 139; --slate-500: 139 154 179; --slate-600: 169 182 204; --slate-700: 196 206 223;
    --slate-800: 226 232 240; --slate-900: 248 250 252;
    --surface: #111a2e; --surface-glass: rgba(11, 17, 32, .85); --line: rgba(248, 250, 252, .08);
    --grid: rgba(248, 250, 252, .045); --glow: rgba(34, 211, 238, .18);
}
body { background-color: rgb(var(--slate-50)); color: rgb(var(--slate-700)); font-family: 'Inter', sans-serif; transition: background-color .2s, color .2s; }
.glass-nav { background: var(--surface-glass); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.bg-grid-dark { background-size: 40px 40px; background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px); }
.text-gradient-cyan { background: linear-gradient(to right, #06b6d4, #2563eb); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card-infra { background: var(--surface); border: 1px solid var(--line); transition: all .3s ease; }
.card-infra:hover { border-color: rgba(6, 182, 212, .4); transform: translateY(-5px); box-shadow: 0 20px 40px -15px var(--glow); }
.terminal-bg { background: repeating-linear-gradient(0deg, rgb(var(--slate-100)) 0 2px, rgb(var(--slate-200)) 2px 4px); }
.tech-ticker::before, .tech-ticker::after { content: ""; position: absolute; top: 0; width: 150px; height: 100%; z-index: 2; }
.tech-ticker::before { left: 0; background: linear-gradient(to right, rgb(var(--slate-50)), transparent); }
.tech-ticker::after { right: 0; background: linear-gradient(to left, rgb(var(--slate-50)), transparent); }

/* logo: o texto troca de cor com o tema */
.logo-word { color: rgb(var(--slate-900)); }
.logo-word .light { color: rgb(var(--slate-600)); font-weight: 300; }

/* botão de tema */
.theme-toggle { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .6rem; border: 1px solid rgb(var(--slate-300)); color: rgb(var(--slate-700)); transition: .2s; }
.theme-toggle:hover { border-color: #06b6d4; color: #06b6d4; }
.theme-toggle .i-sun { display: none; } html.dark .theme-toggle .i-sun { display: inline; } html.dark .theme-toggle .i-moon { display: none; }

/* ajustes do tema escuro para utilitários que não passam pela escala slate */
html.dark .bg-white { background-color: var(--surface); }
html.dark .from-white\/80 { --tw-gradient-from: rgba(17, 26, 46, .8) var(--tw-gradient-from-position); }
html.dark .bg-slate-900.text-white { color: rgb(var(--slate-50)); }
html.dark .bg-slate-900\/5 { background-color: rgba(255, 255, 255, .04); }
html.dark .shadow-xl, html.dark .shadow-2xl { --tw-shadow-color: rgba(0, 0, 0, .5); }
html.dark [class*="bg-blue-100"], html.dark [class*="bg-emerald-100"], html.dark [class*="bg-red-100"], html.dark [class*="bg-indigo-100"], html.dark [class*="bg-purple-100"], html.dark [class*="bg-violet-100"], html.dark [class*="bg-amber-100"], html.dark [class*="bg-teal-100"], html.dark [class*="bg-rose-100"], html.dark [class*="bg-sky-100"], html.dark [class*="bg-fuchsia-100"], html.dark [class*="bg-indigo-100"], html.dark [class*="bg-orange-100"] { background-color: rgba(255, 255, 255, .06); }
html.dark .text-blue-700, html.dark .text-blue-600 { color: #60a5fa; }
html.dark .text-emerald-600 { color: #34d399; } html.dark .text-red-600 { color: #f87171; }
html.dark .text-indigo-600 { color: #818cf8; } html.dark .text-violet-700, html.dark .text-amber-700, html.dark .text-teal-700, html.dark .text-rose-700, html.dark .text-sky-700, html.dark .text-fuchsia-700, html.dark .text-indigo-700, html.dark .text-purple-600 { color: #c084fc; }
html.dark .text-orange-600 { color: #fb923c; } html.dark .text-sky-600 { color: #38bdf8; }
html.dark img.invert-dark { filter: brightness(.8); }