/* ==========================================================================
   Quatro1 - camada 1: base
   Escrita sobre Bootstrap 5.3 (vendorizado em static/vendor/), sem build step.

   O sistema visual vem em tres camadas, nesta ordem obrigatoria:

       bootstrap.min.css -> base.css -> components.css -> site.css

   base.css        tokens --q1-*, base do documento e scrollbar
   components.css  pecas reutilizaveis: botao laranja, cards, faixa laranja,
                   botoes flutuantes
   site.css        as regioes do site: navbar, banner do topo, rodape

   Os tokens so existem AQUI. As outras camadas consomem, nunca redeclaram.
   As landing pages NAO carregam estas camadas - ver static/css/landpage.css.

   Contraste da marca: o laranja #ffaa17 da 1,91:1 com branco, o que REPROVA
   em WCAG AA (4,5:1). E o que acontece hoje no texto branco do .btn_orange.
   Sobre grafite ele da 8,14:1: laranja funciona como TEXTO sobre fundo escuro
   e como FUNDO com texto grafite. Ver docs/backlog/melhorias.md.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
    /* Marca */
    --q1-laranja: #ffaa17;            /* sobre grafite 8,14:1 · com branco 1,91:1 */
    --q1-laranja-escuro: #d38f1a;     /* borda interna da faixa .bg_custom */
    --q1-grafite: #222429;            /* fundo do scrollbar e do botao hover */
    --q1-branco: #fff;

    /* Tipografia. A Poppins nunca chegou a carregar no site (o @import estava
       depois de outras regras e o navegador o ignorava): na pratica vale o
       sans-serif do sistema. Ver Q1-14. */
    --q1-fonte: 'Poppins', sans-serif;

    /* Sombras e medidas */
    --q1-sombra-card: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --q1-altura-logo: 3rem;
    --q1-altura-imagem-card: 200px;
    --q1-altura-imagem-card-servico: 150px;
    --q1-altura-imagem-detalhe: 50vh;
    --q1-altura-titulo-card: 40px;
    --q1-altura-marca: 2rem;

    /* Botoes flutuantes */
    --q1-z-flutuante: 99;
    --q1-transicao: 0.6s;
}

/* --- Base ----------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--q1-fonte);
    background-color: white;
}

/* --- Scrollbar ------------------------------------------------------------ */
/* So navegadores WebKit/Blink (Chrome, Edge, Safari). */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--q1-grafite);
    border-radius: 30px;
    border: 1px solid var(--q1-grafite);
}

::-webkit-scrollbar-thumb {
    background: var(--q1-laranja);
    border-radius: 30px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--q1-laranja);
}