/* ooptIA · Web.App — design tokens.
   Fonte da verdade: documentation/base_documentation/docs/dev/08-design-system.md §2, §3 e §10
   (valores de mockups/base.css e mockups/extra.css). Os nomes são os do documento, para a conferência
   ser item a item e o Flutter (OoCores, OoTexto, OoEspacos…) e a web falarem a mesma língua.

   Regra: este é o ÚNICO arquivo com cor crua. Todo o resto de wwwroot/app/css usa var(--*).
   Tamanhos em px do mockup; a escala de texto é a coluna "Web" do §2.2 (o navegador usa a medida
   do mockup nas três visões — no aplicativo Flutter, tablet e celular somam um ponto).

   Pontos de quebra (§3) — não há variável em media query, então ficam declarados aqui como custom
   media (para quem processar o CSS) e repetidos literalmente nas folhas, sempre com estes valores:
     celular  < 600      @media (max-width: 599.98px)
     tablet   600–1099   @media (min-width: 600px) and (max-width: 1099.98px)
     web      ≥ 1100     @media (min-width: 1100px)
   O <html> recebe data-visao="celular|tablet|web" (script no <head> do _Layout + app.js). */

@custom-media --celular (max-width: 599.98px);
@custom-media --tablet (min-width: 600px) and (max-width: 1099.98px);
@custom-media --web (min-width: 1100px);
@custom-media --toque (pointer: coarse);

:root {
    color-scheme: light;

    /* ---------- 2.1 cores · marca ---------- */
    --azulLente: #1E63F0;
    --cianoIA: #27D3F5;
    --ambarArmacao: #FFB224;
    --azulNoite: #0A1730;
    --nevoa: #EEF3F9;
    --azulMarca: #5B9BFF;          /* início do degradê do "IA" da marca */
    --azulPasso: #17346B;          /* início do degradê do painel do passo a passo */

    /* ---------- 2.1 cores · semânticas (o que as telas usam) ---------- */
    --fundo: #F3F6FB;
    --superficie: #FFFFFF;
    --superficieOtto: #FAFCFE;
    --superficieColuna: #E9EFF7;
    --neutroSuave: #EEF3F9;
    --borda: #DCE4EF;
    --bordaForte: #B8C6D8;
    --controleApagado: #C7D2E0;
    --texto: #0A1730;
    --textoSuave: #5B6B82;
    --primaria: #1E63F0;
    --primariaSuave: #E8F0FF;
    --primariaBorda: #C9DBFF;
    --primariaTexto: #1B5CE0;
    --sobrePrimaria: #FFFFFF;
    --sobrePrimariaBorda: rgb(255 255 255 / .45); /* decisão: contorno de tecla de atalho dentro do botão primário */
    --noite: #0A1730;
    --sobreNoite: #FFFFFF;
    --sobreNoiteSuave: #C9D6EA;
    --sobreNoiteApagado: #9FB2CF;
    --sobreNoiteLegenda: #B9C6DA;
    --sobreNoiteRealce: rgb(255 255 255 / .07);   /* decisão: hover de item sobre noite */
    --sobreNoiteDivisor: rgb(255 255 255 / .10);  /* decisão: divisor sobre noite */
    --sobreNoiteBorda: rgb(255 255 255 / .18);    /* decisão: borda de balão sobre noite (passo a passo) */
    --menuAtivo: rgb(39 211 245 / .16);
    --ciano: #27D3F5;
    --atencao: #FFB224;
    --atencaoSuave: #FFF4DB;
    --atencaoTexto: #8A5A00;
    --orcamentoBorda: #F2D48A;
    --orcamentoFundo: #FFFBF0;
    --orcamentoTexto: #6B5320;
    --sucesso: #17A673;
    --sucessoSuave: #E7F8EF;
    --sucessoTexto: #0E7A4E;
    --erro: #E5484D;
    --erroSuave: #FDECEC;
    --erroTexto: #B4232A;
    --lido: #F2FBFE;
    --lidoBorda: #A9E9F7;
    --whatsappFundo: #EFE9E1;
    --whatsappMinha: #D9FDD3;
    --veu: rgb(10 23 48 / .55);
    --avatar: #1E63F0; /* a mesma primária: branco sobre ela dá 5,1 (doc 08 §11); o azul antigo dava 4,49 */
    /* Zonas de visão no desenho da lente (cartões de tipo de lente da O.S.): longe, meio e perto. */
    --zonaLonge: #E8F0FF;
    --zonaLongeBorda: #C9DBFF;
    --zonaMeio: #27D3F5;
    --zonaPerto: #1E63F0;
    --zonaVidro: #FFFFFF;
    --zonaBrilho: .55;

    /* degradês permitidos (§2.1) — nenhum outro */
    --degradeProgresso: linear-gradient(90deg, var(--primaria), var(--ciano));
    --degradeMarca: linear-gradient(90deg, var(--azulMarca), var(--ciano));
    --degradePasso: linear-gradient(180deg, var(--azulPasso), var(--noite));
    --degradeOrcamento: linear-gradient(180deg, var(--orcamentoFundo), var(--superficie) 70%);

    /* ---------- 2.2 tipografia (coluna Web) ---------- */
    --fonteTitulo: "Sora", "Segoe UI", system-ui, sans-serif;
    --fonteCorpo: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --alturaLinhaCorpo: 1.4;
    --alturaLinhaTitulo: 1.2;
    --letraTitulo: -0.02em;       /* títulos e números */
    --letraPreco: -0.03em;
    --letraMarca: -0.035em;
    --numerosTabulares: "tnum" 1;

    /* estilo: peso tamanho/altura família — uso: font: var(--tipoBotao) */
    --tipoPreco: 800 34px/1.1 var(--fonteTitulo);
    --tipoTituloJanela: 700 22px/var(--alturaLinhaTitulo) var(--fonteTitulo);
    --tipoTituloPasso: 700 20px/var(--alturaLinhaTitulo) var(--fonteTitulo);
    --tipoSaudacao: 700 19px/var(--alturaLinhaTitulo) var(--fonteTitulo);
    --tipoNumero: 700 19px/var(--alturaLinhaTitulo) var(--fonteTitulo);
    --tipoTituloTela: 700 16px/var(--alturaLinhaTitulo) var(--fonteTitulo);
    --tipoTituloCartao: 700 15px/var(--alturaLinhaTitulo) var(--fonteTitulo);
    --tipoBotaoGrande: 700 15px/var(--alturaLinhaTitulo) var(--fonteTitulo);
    --tipoBotao: 700 13px/var(--alturaLinhaTitulo) var(--fonteTitulo);
    --tipoMenu: 600 13px/var(--alturaLinhaTitulo) var(--fonteTitulo);
    --tipoMenuApp: 600 11px/var(--alturaLinhaTitulo) var(--fonteTitulo); /* trilho e barra inferior */
    --tipoLinhaTitulo: 700 13px/var(--alturaLinhaCorpo) var(--fonteCorpo);
    --tipoCorpo: 400 13px/var(--alturaLinhaCorpo) var(--fonteCorpo);
    --tipoChip: 600 12.5px/var(--alturaLinhaTitulo) var(--fonteTitulo);
    --tipoMensagem: 400 12.5px/var(--alturaLinhaCorpo) var(--fonteCorpo);
    --tipoEtapa: 600 12px/var(--alturaLinhaTitulo) var(--fonteTitulo);
    --tipoLinhaSub: 400 11.5px/var(--alturaLinhaCorpo) var(--fonteCorpo);
    --tipoBotaoPequeno: 700 11.5px/var(--alturaLinhaTitulo) var(--fonteTitulo);
    --tipoRotulo: 600 11px/var(--alturaLinhaCorpo) var(--fonteCorpo);
    --tipoIndicadorRotulo: 600 11px/var(--alturaLinhaTitulo) var(--fonteTitulo);
    --tipoLegenda: 400 10.5px/var(--alturaLinhaCorpo) var(--fonteCorpo);
    --tipoEtiqueta: 700 10.5px/var(--alturaLinhaTitulo) var(--fonteTitulo);
    --tipoCabecalhoTabela: 700 10.5px/var(--alturaLinhaTitulo) var(--fonteTitulo);

    /* ---------- 2.3 espaçamento ---------- */
    --e2: 2px;
    --e4: 4px;
    --e6: 6px;
    --e8: 8px;
    --e10: 10px;
    --e12: 12px;
    --e14: 14px;
    --e16: 16px;
    --e20: 20px;
    --e24: 24px;
    --e32: 32px;

    /* recheios compostos (vertical horizontal) */
    --recheioCartao: var(--e12) var(--e14);
    --recheioLinha: var(--e8) 0;
    --telaWeb: var(--e16) 18px;
    --telaTablet: var(--e14) var(--e16);
    --telaCelular: var(--e12);
    --recheioJanela: var(--e24);
    --entreBlocos: var(--e12);           /* web e tablet */
    --entreBlocosCelular: var(--e10);

    /* ---------- 2.4 raios ---------- */
    --r5: 5px;
    --r8: 8px;
    --r10: 10px;
    --r12: 12px;
    --r14: 14px;
    --r18: 18px;
    --r22: 22px;
    --pilula: 999px;
    --raioBalaoOtto: 14px 14px 14px 4px;
    --raioBalaoMeu: 14px 14px 4px 14px;

    /* ---------- 2.4 bordas ---------- */
    --bordaPadrao: 1px solid var(--borda);
    --bordaSelecao: 1.5px solid var(--primaria);
    --bordaConferencia: 1.5px solid var(--atencao);
    --bordaSugestao: 1.5px dashed var(--atencao);
    --larguraBordaPergunta: 2px;
    --larguraFaixaLateral: 4px;
    --anelFoco: 2px solid var(--primaria);
    --anelFocoAfastamento: 2px;

    /* ---------- 2.4 sombras (só no que flutua) ---------- */
    /* Séries de gráfico sobre fundo de cor forte (a barra "Vendido hoje" do Início do gestor, RN-INI-030): iguais
       no claro e no escuro, porque o fundo é sempre o azul da marca. */
    --serieVerde: #3DDC97;
    --serieCoral: #FF8A5C;
    --serieCiano: #7FE7F2;
    --serieRosa: #FF9ECB;
    --serieLilas: #C9B8FF;
    --serieAmarelo: #FFE27A;
    --sombraNenhuma: none;
    --sombraBalao: 0 8px 18px rgb(10 23 48 / .16);
    --sombraFlutuante: 0 10px 24px rgb(10 23 48 / .35);
    --sombraAcao: 0 8px 18px rgb(30 99 240 / .40);
    --sombraJanela: 0 20px 48px rgb(10 23 48 / .28);
    --sombraHalo: 0 0 0 9px rgb(255 178 36 / .22);

    /* ---------- 2.4 tamanhos ---------- */
    --toque: 48px;                 /* alvo mínimo no tablet e no celular */
    --icone: 18px;
    --iconeGrande: 24px;
    --iconeAviso: 15px;            /* "O que vai acontecer" */
    --tracoIcone: 1.9;
    --ponto: 9px;
    --tamanhoAvatar: 30px;
    --alturaCampo: 36px;           /* 48 em toque (abaixo) */
    --alturaBotao: 36px;
    --alturaBotaoPequeno: 28px;
    --alturaBotaoGrande: 48px;
    --barraProgresso: 7px;
    --chaveLargura: 34px;
    --chaveAltura: 20px;
    --check: 17px;
    --radio: 15px;
    --menuLateral: 190px;
    --trilho: 68px;
    --itemTrilho: 58px;
    --barraSuperior: 56px;
    --barraSuperiorCelular: 48px;
    --barraInferior: 68px;
    --botaoMais: 50px;
    --ottoPainel: 300px;
    --ottoRecolhido: 58px;
    --colunaResumo: 270px;
    --colunaResumoTablet: 290px;
    --larguraJanela: 640px;
    --larguraFormulario: 720px;
    --larguraConteudo: 1440px;

    /* camadas */
    --camadaFixa: 20;
    --camadaTopo: 30;
    --camadaMenu: 40;
    --camadaFlutuante: 45;
    --camadaGaveta: 50;
    --camadaJanela: 60;
    --camadaSuspenso: 70;
    --camadaAviso: 80;

    /* ---------- 10 movimento ---------- */
    --duracaoInstantanea: 0ms;     /* troca de tela na web */
    --duracaoRapida: 120ms;        /* cor de foco, chave, chip; saída de janela */
    --duracaoPadrao: 180ms;        /* janela, folha, painel do Otto */
    --duracaoLenta: 280ms;         /* balão do Otto (elástico curto) */
    --duracaoEsqueleto: 1100ms;    /* brilho do esqueleto */
    --duracaoToast: 4s;
    --duracaoDesfazer: 6s;
    --curvaEntrada: cubic-bezier(.215, .61, .355, 1);    /* easeOutCubic */
    --curvaSaida: cubic-bezier(.55, .055, .675, .19);    /* easeInCubic */
    --curvaElastica: cubic-bezier(.175, .885, .32, 1.275); /* easeOutBack */
}

/* Tela de toque (tablet e celular): campo e botão sobem para o alvo de 48 (§2.4). */
@media (pointer: coarse) {
    :root {
        --alturaCampo: 48px;
        --alturaBotao: 48px;
        --alturaBotaoPequeno: 36px;
        --alturaBotaoGrande: 52px;
    }
}

/* ---------- 2.5 tema escuro (fora do MVP; preparado) ----------
   Mesmos nomes, segundo conjunto de valores. Vale por preferência do sistema (sem escolha salva) ou
   por data-theme="dark". As duas regras abaixo são idênticas: CSS não deixa compartilhar o bloco. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --fundo: #0C1424;
        --superficie: #121D33;
        --superficieOtto: #0F192D;
        --superficieColuna: #0A1220;
        --neutroSuave: #1B2944;
        --borda: #22314F;
        --bordaForte: #34476B;
        --controleApagado: #3A4D70;
        --texto: #E6EDF7;
        --textoSuave: #9AABC4;
        --primaria: #2A6AF0;
        --primariaSuave: #16284A;
        --primariaBorda: #2A4580;
        --primariaTexto: #8DB3FF;
        --zonaLonge: #1B2E52;
        --zonaLongeBorda: #2F4A80;
        --zonaMeio: #27D3F5;
        --zonaPerto: #4C86FF;
        --zonaVidro: #121D33;
        --zonaBrilho: .12;
        --noite: #070F1F;
        --atencaoSuave: #2E2410;
        --atencaoTexto: #FFCB6B;
        --orcamentoBorda: #5C4A1F;
        --orcamentoFundo: #241D0E;
        --orcamentoTexto: #E8C77A;
        --sucessoSuave: #0F2D22;
        --sucessoTexto: #5FD6A6;
        --erroSuave: #351719;
        --erroTexto: #FF8E91;
        --lido: #0F2834;
        --lidoBorda: #1F5A6E;
        --whatsappFundo: #1A1F26;
        --whatsappMinha: #1E3A2A;
        --veu: rgb(0 0 0 / .6);
        --sombraBalao: 0 8px 18px rgb(0 0 0 / .45);
        --sombraFlutuante: 0 10px 24px rgb(0 0 0 / .55);
        --sombraJanela: 0 20px 48px rgb(0 0 0 / .6);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --fundo: #0C1424;
    --superficie: #121D33;
    --superficieOtto: #0F192D;
    --superficieColuna: #0A1220;
    --neutroSuave: #1B2944;
    --borda: #22314F;
    --bordaForte: #34476B;
    --controleApagado: #3A4D70;
    --texto: #E6EDF7;
    --textoSuave: #9AABC4;
    --primaria: #2A6AF0;
    --primariaSuave: #16284A;
    --primariaBorda: #2A4580;
    --primariaTexto: #8DB3FF;
    --zonaLonge: #1B2E52;
    --zonaLongeBorda: #2F4A80;
    --zonaMeio: #27D3F5;
    --zonaPerto: #4C86FF;
    --zonaVidro: #121D33;
    --zonaBrilho: .12;
    --noite: #070F1F;
    --atencaoSuave: #2E2410;
    --atencaoTexto: #FFCB6B;
    --orcamentoBorda: #5C4A1F;
    --orcamentoFundo: #241D0E;
    --orcamentoTexto: #E8C77A;
    --sucessoSuave: #0F2D22;
    --sucessoTexto: #5FD6A6;
    --erroSuave: #351719;
    --erroTexto: #FF8E91;
    --lido: #0F2834;
    --lidoBorda: #1F5A6E;
    --whatsappFundo: #1A1F26;
    --whatsappMinha: #1E3A2A;
    --veu: rgb(0 0 0 / .6);
    --sombraBalao: 0 8px 18px rgb(0 0 0 / .45);
    --sombraFlutuante: 0 10px 24px rgb(0 0 0 / .55);
    --sombraJanela: 0 20px 48px rgb(0 0 0 / .6);
}

/* =====================================================================
   COMPATIBILIDADE — nomes antigos dos tokens (antes da task 2 / doc 08).
   As tasks 3 a 6 (shell, componentes Oo*, Otto) foram feitas em paralelo com a renomeação e ainda
   usam estes nomes. Cada um aponta para o token do doc 08, então o tema escuro segue sozinho.
   NÃO use em código novo; ao mexer numa folha, troque o nome antigo pelo da direita.
   ===================================================================== */
:root {
    /* cores */
    --navy: var(--noite);
    --navy-2: var(--azulPasso);
    --blue: var(--primaria);
    --blue-strong: var(--primariaTexto);
    --cyan: var(--ciano);
    --amber: var(--atencao);
    --ok: var(--sucesso);
    --bad: var(--erro);
    --bg: var(--fundo);
    --surface: var(--superficie);
    --surface-2: var(--superficieOtto);
    --surface-sunken: var(--superficieColuna);
    --mist: var(--neutroSuave);
    --line: var(--borda);
    --line-strong: var(--bordaForte);
    --ink: var(--texto);
    --muted: var(--textoSuave);
    --subtle: var(--textoSuave);
    --blue-soft: var(--primariaSuave);
    --blue-soft-line: var(--primariaBorda);
    --blue-text: var(--primariaTexto);
    --amber-soft: var(--atencaoSuave);
    --amber-text: var(--atencaoTexto);
    --ok-soft: var(--sucessoSuave);
    --ok-text: var(--sucessoTexto);
    --bad-soft: var(--erroSuave);
    --bad-text: var(--erroTexto);
    --auto-soft: var(--lido);
    --auto-line: var(--lidoBorda);
    --side-bg: var(--noite);
    --side-text: var(--sobreNoiteSuave);
    --side-text-dim: var(--sobreNoiteApagado);
    --side-on-bg: var(--menuAtivo);
    --side-hover-bg: var(--sobreNoiteRealce);
    --side-line: var(--sobreNoiteDivisor);

    /* tipografia */
    --display: var(--fonteTitulo);
    --body: var(--fonteCorpo);
    --fs-xs: 11px;
    --fs-sm: 12.5px;
    --fs-md: 14px;
    --fs-lg: 16px;
    --fs-xl: 20px;
    --fs-2xl: 24px;

    /* espaçamento e raios */
    --sp-1: var(--e4);
    --sp-2: var(--e8);
    --sp-3: var(--e12);
    --sp-4: var(--e16);
    --sp-5: var(--e20);
    --sp-6: var(--e24);
    --sp-8: var(--e32);
    --r-sm: var(--r8);
    --r-md: var(--r10);
    --r-lg: var(--r14);
    --r-xl: var(--r22);
    --r-pill: var(--pilula);

    /* sombras, foco e estados */
    --shadow-sm: 0 1px 2px rgb(10 23 48 / .06);
    --shadow-md: var(--sombraBalao);
    --shadow-lg: var(--sombraJanela);
    --shadow-primary: var(--sombraAcao);
    --focus-ring: 0 0 0 3px rgb(30 99 240 / .35);
    --hover-veil: rgb(10 23 48 / .04);   /* "sobre": fundo 4% mais escuro (doc 08 §5) */
    --press-veil: rgb(10 23 48 / .08);

    /* medidas do shell (doc 08 §3) */
    --side-w: var(--menuLateral);
    --rail-w: var(--trilho);
    --rail-item-w: var(--itemTrilho);
    --top-h: var(--barraSuperior);
    --top-h-celular: var(--barraSuperiorCelular);
    --otto-w: var(--ottoPainel);
    --otto-closed-w: var(--ottoRecolhido);
    --bnav-h: var(--barraInferior);
    --plus-size: var(--botaoMais);
    --plus-rise: 22px;
    --acoes-h: 64px;
    --acoes-folga-otto: 84px;
    --lista-reserva: 96px;
    --content-max: var(--larguraConteudo);

    /* camadas e movimento */
    --z-sticky: var(--camadaFixa);
    --z-header: var(--camadaTopo);
    --z-sidebar: var(--camadaMenu);
    --z-float: var(--camadaFlutuante);
    --z-drawer: var(--camadaGaveta);
    --z-modal: var(--camadaJanela);
    --z-popover: var(--camadaSuspenso);
    --z-toast: var(--camadaAviso);
    --ease: var(--curvaEntrada);
    --dur: var(--duracaoPadrao);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --hover-veil: rgb(255 255 255 / .05); --press-veil: rgb(255 255 255 / .09); }
}
:root[data-theme="dark"] { --hover-veil: rgb(255 255 255 / .05); --press-veil: rgb(255 255 255 / .09); }