/* Estilo compartilhado das páginas de documentação (usa Tailwind CDN para o layout). */

:root {
    --bg: 248 250 252;
    --surface: 255 255 255;
    --ink: 15 23 42;
    --muted: 100 116 139;
    --line: 226 232 240;
    --accent: 37 99 235;
    --accent-ink: 255 255 255;
}

.dark {
    --bg: 8 20 40;
    --surface: 15 32 60;
    --ink: 226 232 248;
    --muted: 139 151 182;
    --line: 32 52 88;
    --accent: 100 255 218;
    --accent-ink: 6 24 40;
}

html { scroll-padding-top: 6rem; }

body {
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.bg-aurora {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60rem 40rem at 85% -10%, rgb(var(--accent) / .14), transparent 60%),
        radial-gradient(45rem 35rem at -10% 40%, rgb(99 102 241 / .10), transparent 60%);
}

.bg-aurora::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgb(var(--line) / .5) 1px, transparent 1px),
        linear-gradient(90deg, rgb(var(--line) / .5) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 45% at 50% 0%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 45% at 50% 0%, #000 20%, transparent 75%);
}

/* Revelar ao rolar (só com JS ativo) */
.js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--d, 0ms);
}
.js .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js .reveal, .js .reveal.visible { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgb(var(--bg)); }
::-webkit-scrollbar-thumb { background: rgb(var(--line)); border-radius: 10px; border: 2px solid rgb(var(--bg)); }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--accent)); }
::selection { background: rgb(var(--accent) / .3); }
:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 3px; border-radius: 6px; }

/* ---------- Componentes ---------- */
.eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .75rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgb(var(--accent));
}

.doc-h2 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: rgb(var(--ink));
    margin-top: .5rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .75rem;
    padding: .7rem 1.25rem;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.btn-primary {
    background: rgb(var(--accent));
    color: rgb(var(--accent-ink));
    box-shadow: 0 10px 24px -10px rgb(var(--accent) / .55);
}
.btn-ghost {
    border: 1px solid rgb(var(--line));
    background: rgb(var(--surface) / .6);
    color: rgb(var(--ink));
    backdrop-filter: blur(8px);
}
.btn:hover { transform: translateY(-2px); }
.btn-ghost:hover { border-color: rgb(var(--accent) / .6); color: rgb(var(--accent)); }

.card {
    border: 1px solid rgb(var(--line));
    background: rgb(var(--surface) / .7);
    border-radius: 1rem;
    backdrop-filter: blur(8px);
}

.chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgb(var(--line));
    border-radius: 9999px;
    background: rgb(var(--bg) / .6);
    padding: .3rem .85rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .8rem;
    color: rgb(var(--muted));
}

.bullet {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    line-height: 1.65;
}
.bullet::before {
    content: "";
    flex: none;
    width: .4rem;
    height: .4rem;
    margin-top: .6rem;
    border-radius: 9999px;
    background: rgb(var(--accent));
}

/* Bloco de código com botão de copiar */
.code-block {
    position: relative;
    overflow-x: auto;
    margin: 0;
    padding: 1rem 3.5rem 1rem 1.25rem;
    border: 1px solid rgb(var(--line));
    border-radius: .875rem;
    background: rgb(var(--surface));
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .85rem;
    line-height: 1.7;
    color: rgb(var(--ink));
    white-space: pre;
}
.code-wrap { position: relative; }
.copy-code {
    position: absolute;
    top: .6rem;
    right: .6rem;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid rgb(var(--line));
    border-radius: .6rem;
    background: rgb(var(--bg));
    color: rgb(var(--muted));
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}
.copy-code:hover { color: rgb(var(--accent)); border-color: rgb(var(--accent) / .6); }

/* Aviso */
.callout {
    display: flex;
    gap: .9rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgb(234 179 8 / .45);
    border-left-width: 4px;
    border-radius: .875rem;
    background: rgb(234 179 8 / .1);
    color: rgb(var(--ink));
}
.callout i { color: rgb(202 138 4); margin-top: .2rem; }
.dark .callout i { color: rgb(250 204 21); }

/* Índice lateral */
.toc a {
    display: block;
    padding: .35rem 0 .35rem 1rem;
    border-left: 2px solid rgb(var(--line));
    font-size: .875rem;
    color: rgb(var(--muted));
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease;
}
.toc a:hover { color: rgb(var(--ink)); }
.toc a.active { color: rgb(var(--accent)); border-left-color: rgb(var(--accent)); font-weight: 600; }

/* Galeria + lightbox */
.gallery-image {
    cursor: zoom-in;
    border: 1px solid rgb(var(--line));
    border-radius: .875rem;
    box-shadow: 0 18px 40px -26px rgb(0 0 0 / .55);
    transition: transform .4s ease, border-color .3s ease;
}
.gallery-image:hover { transform: translateY(-3px); border-color: rgb(var(--accent) / .5); }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgb(2 8 20 / .88);
    backdrop-filter: blur(6px);
}
.lightbox.open { display: flex; }
.lightbox img { max-width: min(92vw, 1200px); max-height: 86vh; border-radius: .875rem; }
.lightbox button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgb(255 255 255 / .25);
    border-radius: .75rem;
    background: rgb(255 255 255 / .08);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}
.lightbox button:hover { background: rgb(255 255 255 / .18); }

@media print {
    .no-print { display: none !important; }
}