/* ==========================================================================
   PlusWeb Loja Virtual - tema "Nova"
   tokens.css - fonte unica de verdade de cor, forma, ritmo e movimento.

   CONTRATO DE TEMA (tres estados, nesta ordem, sem excecao):
     1. :root ............................. paleta CLARA completa.
        Toda cor tem sua definicao aqui. Nenhuma cor pode existir apenas
        dentro de media query.
     2. @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) }
        redefine os tokens para o modo ESCURO quando o sistema pede escuro
        e o usuario nao escolheu claro na mao.
     3. :root[data-tema="escuro"] ......... redefine de novo, para a escolha
        manual vencer nos dois sentidos.

   Prefixo obrigatorio: --lv-
   Razoes de contraste calculadas e registradas em docs/DESIGN-SYSTEM.md.
   ========================================================================== */

:root {
    color-scheme: light;

    /* ---------------------------------------------------------------------
       COR - modo claro
       --------------------------------------------------------------------- */

    /* Superficies. `fundo` e a pagina; `superficie` e o cartao; 2 e 3 sao
       elevacoes tonais (quanto maior, mais afastado do fundo). */
    --lv-fundo: #f5f7fc;
    --lv-fundo-profundo: #e9eef7;
    --lv-superficie: #ffffff;
    --lv-superficie-2: #eef2f9;
    --lv-superficie-3: #e2e8f4;

    /* Bordas. `borda` e separador decorativo (contraste livre);
       `borda-forte` delimita CONTROLE e respeita 3:1 (WCAG 1.4.11). */
    --lv-borda: #dce3ef;
    --lv-borda-forte: #7e889e;

    /* Texto. */
    --lv-texto: #0c1424;
    --lv-texto-suave: #4f5b75;
    --lv-texto-inverso: #ffffff;

    /* Marca. `primaria` e preenchimento; `primaria-texto` e a versao
       calibrada para ser lida COMO TEXTO sobre superficie clara. */
    --lv-primaria: #0e7490;
    --lv-primaria-forte: #0b5c74;
    --lv-primaria-texto: #0b6076;
    --lv-sobre-primaria: #ffffff;
    --lv-primaria-suave: rgba(14, 116, 144, 0.1);
    --lv-primaria-suave-2: rgba(14, 116, 144, 0.18);

    --lv-acento: #7c3aed;
    --lv-acento-forte: #6d28d9;
    --lv-acento-texto: #6d28d9;
    --lv-sobre-acento: #ffffff;
    --lv-acento-suave: rgba(124, 58, 237, 0.1);

    /* Semanticos. O preenchimento e o mesmo nos dois modos (cor de sinal
       nao muda de identidade); so o par -texto e o -suave sao recalibrados. */
    --lv-sucesso: #15803d;
    --lv-sucesso-texto: #146c34;
    --lv-sucesso-suave: rgba(21, 128, 61, 0.12);
    --lv-sobre-sucesso: #ffffff;

    --lv-aviso: #f59e0b;
    --lv-aviso-texto: #8a4b06;
    --lv-aviso-suave: rgba(245, 158, 11, 0.16);
    --lv-sobre-aviso: #241300;

    --lv-erro: #dc2626;
    --lv-erro-texto: #b91c1c;
    --lv-erro-suave: rgba(220, 38, 38, 0.1);
    --lv-sobre-erro: #ffffff;

    --lv-info: #1d4ed8;
    --lv-info-texto: #1d4ed8;
    --lv-info-suave: rgba(29, 78, 216, 0.1);
    --lv-sobre-info: #ffffff;

    /* Estados e superficies especiais. */
    --lv-foco: #0e7490;
    --lv-selecionado: rgba(14, 116, 144, 0.12);
    --lv-hover: rgba(12, 20, 36, 0.045);
    --lv-backdrop: rgba(8, 14, 28, 0.55);
    --lv-marcado: rgba(245, 158, 11, 0.35);

    /* Vidro fosco. O `blur` e desligado sozinho quando o navegador nao
       suporta backdrop-filter (ver base.css). */
    --lv-vidro: rgba(255, 255, 255, 0.72);
    --lv-vidro-borda: rgba(12, 20, 36, 0.08);
    --lv-vidro-blur: 14px;

    /* Gradientes de marca. */
    --lv-grad-marca: linear-gradient(120deg, #0e7490 0%, #6d28d9 100%);
    --lv-grad-marca-suave: linear-gradient(120deg, rgba(14, 116, 144, 0.12) 0%, rgba(109, 40, 217, 0.12) 100%);
    --lv-grad-superficie: linear-gradient(180deg, #ffffff 0%, #f2f5fb 100%);
    --lv-grad-brilho: radial-gradient(60% 80% at 50% 0%, rgba(14, 116, 144, 0.16) 0%, rgba(14, 116, 144, 0) 70%);
    --lv-grad-esqueleto: linear-gradient(
        90deg,
        var(--lv-superficie-2) 0%,
        var(--lv-superficie-3) 40%,
        var(--lv-superficie-2) 80%
    );

    /* Sombras. No claro sao sombras de verdade; no escuro viram halo. */
    --lv-sombra-0: none;
    --lv-sombra-1: 0 1px 2px rgba(12, 20, 36, 0.06), 0 1px 1px rgba(12, 20, 36, 0.04);
    --lv-sombra-2: 0 4px 12px rgba(12, 20, 36, 0.08), 0 1px 3px rgba(12, 20, 36, 0.05);
    --lv-sombra-3: 0 12px 28px rgba(12, 20, 36, 0.1), 0 4px 8px rgba(12, 20, 36, 0.05);
    --lv-sombra-4: 0 24px 56px rgba(12, 20, 36, 0.14), 0 8px 16px rgba(12, 20, 36, 0.06);
    --lv-sombra-neon: 0 0 0 1px rgba(14, 116, 144, 0.2), 0 8px 24px rgba(14, 116, 144, 0.18);
    --lv-sombra-interna: inset 0 1px 0 rgba(255, 255, 255, 0.6);

    /* ---------------------------------------------------------------------
       FORMA - raios (nao mudam por tema)
       --------------------------------------------------------------------- */
    --lv-raio-0: 0;
    --lv-raio-xs: 4px;
    --lv-raio-s: 8px;
    --lv-raio-m: 12px;
    --lv-raio-g: 16px;
    --lv-raio-xg: 24px;
    --lv-raio-xxg: 32px;
    --lv-raio-pilula: 999px;
    --lv-raio-circulo: 50%;

    /* ---------------------------------------------------------------------
       RITMO - escala de espacamento de 4px
       --------------------------------------------------------------------- */
    --lv-espaco-0: 0;
    --lv-espaco-1: 4px;
    --lv-espaco-2: 8px;
    --lv-espaco-3: 12px;
    --lv-espaco-4: 16px;
    --lv-espaco-5: 20px;
    --lv-espaco-6: 24px;
    --lv-espaco-7: 32px;
    --lv-espaco-8: 40px;
    --lv-espaco-9: 48px;
    --lv-espaco-10: 64px;
    --lv-espaco-11: 80px;
    --lv-espaco-12: 96px;
    --lv-espaco-13: 128px;

    /* ---------------------------------------------------------------------
       TIPOGRAFIA - escala modular 1.200 (terca menor) sobre 16px
       --------------------------------------------------------------------- */
    --lv-fonte-familia: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --lv-fonte-titulo: "Inter Display", "Segoe UI Variable Display", "Segoe UI", system-ui,
        -apple-system, "Helvetica Neue", Arial, sans-serif;
    --lv-fonte-mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, "SFMono-Regular", Consolas,
        "Liberation Mono", monospace;

    --lv-fonte-2xs: 0.6875rem;  /* 11px - selo, sobrescrito */
    --lv-fonte-xs: 0.75rem;     /* 12px - legenda, meta */
    --lv-fonte-s: 0.8125rem;    /* 13px - texto denso, painel */
    --lv-fonte-m: 0.9375rem;    /* 15px - texto de interface */
    --lv-fonte-base: 1rem;      /* 16px - corpo */
    --lv-fonte-g: 1.125rem;     /* 18px */
    --lv-fonte-xg: 1.375rem;    /* 22px - titulo de cartao */
    --lv-fonte-2xg: 1.75rem;    /* 28px - titulo de secao */
    --lv-fonte-3xg: 2.25rem;    /* 36px - titulo de pagina */
    --lv-fonte-4xg: 3rem;       /* 48px - heroi */
    --lv-fonte-5xg: 4rem;       /* 64px - heroi grande */

    --lv-peso-normal: 400;
    --lv-peso-medio: 500;
    --lv-peso-semi: 600;
    --lv-peso-forte: 700;
    --lv-peso-extra: 800;

    --lv-altura-apertada: 1.15;
    --lv-altura-titulo: 1.25;
    --lv-altura-normal: 1.55;
    --lv-altura-solta: 1.75;

    --lv-espacamento-apertado: -0.02em;
    --lv-espacamento-normal: 0;
    --lv-espacamento-largo: 0.02em;
    --lv-espacamento-caixa-alta: 0.09em;

    /* ---------------------------------------------------------------------
       MOVIMENTO - nada acima de 240ms em interacao direta
       --------------------------------------------------------------------- */
    --lv-transicao-rapida: 120ms;
    --lv-transicao-media: 180ms;
    --lv-transicao-lenta: 240ms;
    --lv-transicao-entrada: 320ms;
    --lv-curva: cubic-bezier(0.2, 0, 0.2, 1);
    --lv-curva-saida: cubic-bezier(0.4, 0, 1, 1);
    --lv-curva-elastica: cubic-bezier(0.34, 1.3, 0.64, 1);

    /* ---------------------------------------------------------------------
       CAMADAS - z-index nomeado (nunca numero solto no componente)
       --------------------------------------------------------------------- */
    --lv-z-base: 1;
    --lv-z-elevado: 10;
    --lv-z-grudento: 100;
    --lv-z-cabecalho: 200;
    --lv-z-megamenu: 250;
    --lv-z-backdrop: 900;
    --lv-z-drawer: 950;
    --lv-z-modal: 1000;
    --lv-z-popover: 1100;
    --lv-z-tooltip: 1200;
    --lv-z-toast: 1300;
    --lv-z-pular: 1400;

    /* ---------------------------------------------------------------------
       LARGURAS E MEDIDAS
       --------------------------------------------------------------------- */
    --lv-largura-container: 1320px;
    --lv-largura-container-estreito: 960px;
    --lv-largura-container-texto: 68ch;
    --lv-largura-largo: 1600px;
    --lv-largura-drawer: 420px;
    --lv-largura-lateral-conta: 260px;
    --lv-largura-lateral-painel: 264px;
    --lv-largura-lateral-painel-fechada: 72px;
    --lv-largura-filtros: 280px;

    --lv-altura-cabecalho: 72px;
    --lv-altura-cabecalho-compacto: 60px;
    --lv-altura-anuncio: 38px;
    --lv-altura-topo-painel: 60px;

    /* Alvo de toque minimo (WCAG 2.5.8 / diretriz de 44px). */
    --lv-alvo-toque: 44px;
    --lv-alvo-toque-denso: 36px;

    --lv-borda-largura: 1px;
    --lv-borda-largura-forte: 2px;
    --lv-foco-largura: 2px;
    --lv-foco-folga: 2px;
}

/* ==========================================================================
   2. ESCURO por preferencia do sistema (guardado contra a escolha manual
      de tema claro).
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        color-scheme: dark;

        --lv-fundo: #070b18;
        --lv-fundo-profundo: #04070f;
        --lv-superficie: #0e1428;
        --lv-superficie-2: #161e38;
        --lv-superficie-3: #1f294a;

        --lv-borda: #27324f;
        --lv-borda-forte: #62719e;

        --lv-texto: #edf1fa;
        --lv-texto-suave: #a3b0ce;
        --lv-texto-inverso: #070b18;

        --lv-primaria: #22d3ee;
        --lv-primaria-forte: #06b6d4;
        --lv-primaria-texto: #67e8f9;
        --lv-sobre-primaria: #04121a;
        --lv-primaria-suave: rgba(34, 211, 238, 0.14);
        --lv-primaria-suave-2: rgba(34, 211, 238, 0.24);

        --lv-acento: #a78bfa;
        --lv-acento-forte: #8b5cf6;
        --lv-acento-texto: #c4b5fd;
        --lv-sobre-acento: #120a24;
        --lv-acento-suave: rgba(167, 139, 250, 0.16);

        --lv-sucesso: #15803d;
        --lv-sucesso-texto: #4ade80;
        --lv-sucesso-suave: rgba(74, 222, 128, 0.14);
        --lv-sobre-sucesso: #ffffff;

        --lv-aviso: #f59e0b;
        --lv-aviso-texto: #fbbf24;
        --lv-aviso-suave: rgba(251, 191, 36, 0.14);
        --lv-sobre-aviso: #241300;

        --lv-erro: #dc2626;
        --lv-erro-texto: #fca5a5;
        --lv-erro-suave: rgba(252, 165, 165, 0.14);
        --lv-sobre-erro: #ffffff;

        --lv-info: #1d4ed8;
        --lv-info-texto: #93c5fd;
        --lv-info-suave: rgba(147, 197, 253, 0.14);
        --lv-sobre-info: #ffffff;

        --lv-foco: #5ce1f2;
        --lv-selecionado: rgba(34, 211, 238, 0.16);
        --lv-hover: rgba(237, 241, 250, 0.06);
        --lv-backdrop: rgba(3, 6, 14, 0.7);
        --lv-marcado: rgba(251, 191, 36, 0.32);

        --lv-vidro: rgba(14, 20, 40, 0.66);
        --lv-vidro-borda: rgba(237, 241, 250, 0.1);

        --lv-grad-marca: linear-gradient(120deg, #22d3ee 0%, #a78bfa 100%);
        --lv-grad-marca-suave: linear-gradient(120deg, rgba(34, 211, 238, 0.16) 0%, rgba(167, 139, 250, 0.16) 100%);
        --lv-grad-superficie: linear-gradient(180deg, #131b34 0%, #0d1225 100%);
        --lv-grad-brilho: radial-gradient(60% 80% at 50% 0%, rgba(34, 211, 238, 0.14) 0%, rgba(34, 211, 238, 0) 70%);
        --lv-grad-esqueleto: linear-gradient(
            90deg,
            var(--lv-superficie-2) 0%,
            var(--lv-superficie-3) 40%,
            var(--lv-superficie-2) 80%
        );

        --lv-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.5);
        --lv-sombra-2: 0 4px 14px rgba(0, 0, 0, 0.55);
        --lv-sombra-3: 0 14px 34px rgba(0, 0, 0, 0.6);
        --lv-sombra-4: 0 28px 64px rgba(0, 0, 0, 0.68);
        --lv-sombra-neon: 0 0 0 1px rgba(34, 211, 238, 0.32), 0 10px 34px rgba(34, 211, 238, 0.22);
        --lv-sombra-interna: inset 0 1px 0 rgba(237, 241, 250, 0.06);
    }
}

/* ==========================================================================
   3. ESCURO por escolha manual. Repete o bloco acima para que o seletor
      `[data-tema]` vença tanto em sistema claro quanto em sistema escuro.
   ========================================================================== */
:root[data-tema="escuro"] {
    color-scheme: dark;

    --lv-fundo: #070b18;
    --lv-fundo-profundo: #04070f;
    --lv-superficie: #0e1428;
    --lv-superficie-2: #161e38;
    --lv-superficie-3: #1f294a;

    --lv-borda: #27324f;
    --lv-borda-forte: #62719e;

    --lv-texto: #edf1fa;
    --lv-texto-suave: #a3b0ce;
    --lv-texto-inverso: #070b18;

    --lv-primaria: #22d3ee;
    --lv-primaria-forte: #06b6d4;
    --lv-primaria-texto: #67e8f9;
    --lv-sobre-primaria: #04121a;
    --lv-primaria-suave: rgba(34, 211, 238, 0.14);
    --lv-primaria-suave-2: rgba(34, 211, 238, 0.24);

    --lv-acento: #a78bfa;
    --lv-acento-forte: #8b5cf6;
    --lv-acento-texto: #c4b5fd;
    --lv-sobre-acento: #120a24;
    --lv-acento-suave: rgba(167, 139, 250, 0.16);

    --lv-sucesso: #15803d;
    --lv-sucesso-texto: #4ade80;
    --lv-sucesso-suave: rgba(74, 222, 128, 0.14);
    --lv-sobre-sucesso: #ffffff;

    --lv-aviso: #f59e0b;
    --lv-aviso-texto: #fbbf24;
    --lv-aviso-suave: rgba(251, 191, 36, 0.14);
    --lv-sobre-aviso: #241300;

    --lv-erro: #dc2626;
    --lv-erro-texto: #fca5a5;
    --lv-erro-suave: rgba(252, 165, 165, 0.14);
    --lv-sobre-erro: #ffffff;

    --lv-info: #1d4ed8;
    --lv-info-texto: #93c5fd;
    --lv-info-suave: rgba(147, 197, 253, 0.14);
    --lv-sobre-info: #ffffff;

    --lv-foco: #5ce1f2;
    --lv-selecionado: rgba(34, 211, 238, 0.16);
    --lv-hover: rgba(237, 241, 250, 0.06);
    --lv-backdrop: rgba(3, 6, 14, 0.7);
    --lv-marcado: rgba(251, 191, 36, 0.32);

    --lv-vidro: rgba(14, 20, 40, 0.66);
    --lv-vidro-borda: rgba(237, 241, 250, 0.1);

    --lv-grad-marca: linear-gradient(120deg, #22d3ee 0%, #a78bfa 100%);
    --lv-grad-marca-suave: linear-gradient(120deg, rgba(34, 211, 238, 0.16) 0%, rgba(167, 139, 250, 0.16) 100%);
    --lv-grad-superficie: linear-gradient(180deg, #131b34 0%, #0d1225 100%);
    --lv-grad-brilho: radial-gradient(60% 80% at 50% 0%, rgba(34, 211, 238, 0.14) 0%, rgba(34, 211, 238, 0) 70%);
    --lv-grad-esqueleto: linear-gradient(
        90deg,
        var(--lv-superficie-2) 0%,
        var(--lv-superficie-3) 40%,
        var(--lv-superficie-2) 80%
    );

    --lv-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --lv-sombra-2: 0 4px 14px rgba(0, 0, 0, 0.55);
    --lv-sombra-3: 0 14px 34px rgba(0, 0, 0, 0.6);
    --lv-sombra-4: 0 28px 64px rgba(0, 0, 0, 0.68);
    --lv-sombra-neon: 0 0 0 1px rgba(34, 211, 238, 0.32), 0 10px 34px rgba(34, 211, 238, 0.22);
    --lv-sombra-interna: inset 0 1px 0 rgba(237, 241, 250, 0.06);
}

/* Escolha manual de tema CLARO com sistema em escuro: o bloco :root ja
   entregou a paleta clara; so falta reafirmar o color-scheme para que os
   controles nativos (scrollbar, date picker) acompanhem. */
:root[data-tema="claro"] {
    color-scheme: light;
}