/* ============================================================
 * VirtualNet — Design Tokens (fonte da verdade)
 * ------------------------------------------------------------
 * Inclua este arquivo ANTES dos demais CSS no base.html.
 * Todas as cores / espaçamentos / botões devem referenciar
 * essas variáveis. Migração progressiva — atualizar classes
 * existentes quando tocar nelas.
 * ============================================================ */

:root {
    /* ---------- Paleta principal ---------- */
    --vn-neon-blue: #00ffea;
    --vn-neon-cyan: #00f3ff;
    --vn-neon-orange: #ff4d1d;
    --vn-neon-orange-hover: #ff6a3d;
    --vn-neon-purple: #8b5cf6;

    /* ---------- Neutros ---------- */
    --vn-bg-dark: #0a0f1a;
    --vn-bg-dark-2: #0f1722;
    --vn-text: #e8f1ff;
    --vn-text-muted: rgba(230, 244, 255, 0.72);
    --vn-border-subtle: rgba(255, 255, 255, 0.08);
    --vn-border: rgba(0, 255, 234, 0.3);

    /* ---------- Botão primário (laranja) ---------- */
    --vn-btn-primary-bg: linear-gradient(180deg, var(--vn-neon-orange) 0%, #cf3310 100%);
    --vn-btn-primary-bg-hover: linear-gradient(180deg, var(--vn-neon-orange-hover) 0%, #d94216 100%);
    --vn-btn-primary-fg: #ffffff;
    --vn-btn-primary-border: rgba(255, 155, 119, 0.5);

    /* ---------- Botão secundário (ghost cyan) ---------- */
    --vn-btn-ghost-bg: transparent;
    --vn-btn-ghost-bg-hover: rgba(0, 255, 234, 0.08);
    --vn-btn-ghost-fg: var(--vn-neon-blue);
    --vn-btn-ghost-border: rgba(0, 255, 234, 0.5);

    /* ---------- Tipografia ---------- */
    --vn-font-heading: "Orbitron", "Barlow", sans-serif;
    --vn-font-body: "Barlow", "Inter", system-ui, sans-serif;
    --vn-font-mono: "IBM Plex Mono", "JetBrains Mono", monospace;

    /* ---------- Radius e shadow ---------- */
    --vn-radius-sm: 4px;
    --vn-radius-md: 8px;
    --vn-radius-lg: 14px;
    --vn-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --vn-shadow-glow-blue: 0 0 18px rgba(0, 255, 234, 0.25);

    /* ---------- Espaçamento ---------- */
    --vn-space-1: 0.25rem;
    --vn-space-2: 0.5rem;
    --vn-space-3: 0.75rem;
    --vn-space-4: 1rem;
    --vn-space-5: 1.5rem;
    --vn-space-6: 2rem;

    /* ---------- Transições ---------- */
    --vn-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
 * Botões canônicos (usar estes como referência).
 * .vn-btn = primário (preencher com cor)
 * .vn-btn--ghost = secundário (contorno)
 *
 * Migração: ao tocar em .btn-tech / .btn-tech-outline / .btn-primary-cta,
 * trocar por .vn-btn / .vn-btn--ghost.
 * ============================================================ */

.vn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vn-space-2);
    padding: 0.65rem 1.1rem;
    font-family: var(--vn-font-body);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border-radius: var(--vn-radius-md);
    border: 1px solid var(--vn-btn-primary-border);
    background: var(--vn-btn-primary-bg);
    color: var(--vn-btn-primary-fg);
    cursor: pointer;
    transition: var(--vn-transition);
    line-height: 1.2;
}

.vn-btn:hover,
.vn-btn:focus-visible {
    background: var(--vn-btn-primary-bg-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(255, 77, 29, 0.28);
    color: var(--vn-btn-primary-fg);
}

.vn-btn:active {
    transform: translateY(0);
}

.vn-btn:disabled,
.vn-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
}

.vn-btn--ghost {
    background: var(--vn-btn-ghost-bg);
    color: var(--vn-btn-ghost-fg);
    border-color: var(--vn-btn-ghost-border);
}

.vn-btn--ghost:hover,
.vn-btn--ghost:focus-visible {
    background: var(--vn-btn-ghost-bg-hover);
    color: var(--vn-btn-ghost-fg);
    box-shadow: var(--vn-shadow-glow-blue);
}

.vn-btn--sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

.vn-btn--lg {
    padding: 0.9rem 1.6rem;
    font-size: 1.05rem;
}

.vn-btn--block {
    width: 100%;
}