/* ============================================================
 * 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-on-orange: #111827;
    --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) ----------
     * Laranja sólido vivo + texto escuro — mesma receita do CTA do login,
     * eleita como referência (decisão do dono, 2026-06-12). O CTA primário
     * NÃO usa vidro translúcido: sólido garante destaque e contraste AA. */
    --vn-btn-primary-bg: var(--vn-neon-orange);
    --vn-btn-primary-bg-hover: var(--vn-neon-orange-hover);
    --vn-btn-primary-fg: var(--vn-on-orange);
    --vn-btn-primary-border: rgba(255, 145, 110, 0.7);
    --vn-btn-primary-glow: 0 6px 18px rgba(255, 77, 29, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
    --vn-btn-primary-glow-hover: 0 10px 26px rgba(255, 77, 29, 0.5), 0 3px 8px rgba(0, 0, 0, 0.28);

    /* ---------- Botão "glass" laranja (translúcido — padrão dos heroes) ----------
     * Referência visual: botão de velocidade ativo (600 MEGA) do hero Streaming. */
    --vn-glass-orange-bg: linear-gradient(135deg, rgba(255, 77, 29, 0.20), rgba(255, 140, 0, 0.20));
    --vn-glass-orange-bg-hover: linear-gradient(135deg, rgba(255, 77, 29, 0.32), rgba(255, 140, 0, 0.32));
    --vn-glass-orange-border: var(--vn-neon-orange);
    --vn-glass-orange-glow: 0 0 20px rgba(255, 77, 29, 0.20);
    --vn-glass-orange-glow-hover: 0 0 28px rgba(255, 77, 29, 0.38);
    --vn-glass-text-shadow: 0 0 8px rgba(255, 77, 29, 0.80);

    /* ---------- Gradiente de texto ciano (display grande) ----------
     * SEGUNDO gradiente oficial da casa, ao lado do .text-gradient-hero
     * (laranja -> ciano, master_carousel/hero_streaming/css/style.css:118-128).
     * Existe porque o gradiente laranja em texto MUITO grande sobre fundo escuro
     * derruba o pior ponto de contraste de ~11,5:1 para ~5,8:1; este mantém o
     * pior ponto perto de 11,5:1. Uso: números e títulos display sobre #050b14.
     * Nasceu como paleta privada do hero do plano de entrada (100 Mega) e foi
     * promovido a token para deixar de ser divergência de um slide só. */
    --vn-gradient-cyan-text: linear-gradient(100deg, #ffffff 0%, #8bfff5 46%, var(--vn-neon-blue) 100%);

    /* ---------- 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);

    /* ---------- Camadas (z-index) ----------
     * Escala única do site. Os degraus de menu/modal são os do Bootstrap 5.3,
     * então qualquer modal/offcanvas do Bootstrap já cai no lugar certo.
     * Regra: o cabeçalho fica ABAIXO de backdrop, offcanvas e modal (A-080 —
     * antes ele estava em 1100 e cobria o X da grade de canais).
     * Componentes de seção não passam de --vn-z-raised; quem precisa
     * sobrepor a página inteira usa um token daqui, nunca um número solto. */
    --vn-z-base: 1;
    --vn-z-raised: 10;
    --vn-z-dropdown: 1000;
    --vn-z-header: 1030;
    --vn-z-chat: 1035;              /* botão flutuante: acima da página e do cabeçalho, abaixo de menus e modais */
    --vn-z-offcanvas-backdrop: 1040;
    --vn-z-offcanvas: 1045;
    --vn-z-modal-backdrop: 1050;
    --vn-z-modal: 1055;
    --vn-z-popover: 1070;
    --vn-z-toast: 1090;

    /* ---------- Foco visível ---------- */
    --vn-focus-ring: #ffb547;
    --vn-focus-ring-width: 3px;
    --vn-focus-ring-offset: 3px;

    /* ---------- Toque ---------- */
    --vn-tap-min: 44px;
}

/* ============================================================
 * Bootstrap no tema escuro da casa.
 * O <html> do site público tem data-bs-theme="dark"; sem isso o Bootstrap
 * ficava no tema claro "por baixo" e vazava: .text-muted cinza-escuro sobre
 * fundo escuro, pílula branca atrás do rótulo flutuante dos formulários,
 * links azul-royal, modal sem cor própria em branco.
 * :root[...] (0,2,0) vence o [data-bs-theme=dark] do bootstrap.min.css
 * mesmo este arquivo sendo carregado antes dele.
 * ============================================================ */
:root[data-bs-theme="dark"] {
    --bs-body-bg: #050b14;
    --bs-body-bg-rgb: 5, 11, 20;
    --bs-body-color: #e8f1ff;
    --bs-body-color-rgb: 232, 241, 255;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(232, 241, 255, 0.75);
    --bs-secondary-color-rgb: 232, 241, 255;
    --bs-secondary-bg: #0f1722;
    --bs-secondary-bg-rgb: 15, 23, 34;
    --bs-tertiary-color: rgba(232, 241, 255, 0.6);
    --bs-tertiary-bg: #0a121d;
    --bs-tertiary-bg-rgb: 10, 18, 29;
    --bs-border-color: rgba(255, 255, 255, 0.14);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.12);
    --bs-heading-color: #ffffff;
    --bs-link-color: #00ffea;
    --bs-link-color-rgb: 0, 255, 234;
    --bs-link-hover-color: #ff8a5c;
    --bs-link-hover-color-rgb: 255, 138, 92;
    --bs-code-color: #ff8a5c;
    --bs-focus-ring-color: rgba(255, 181, 71, 0.45);
}

/* ============================================================
 * 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: var(--vn-btn-primary-glow-hover);
    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%;
}