/* ============================================================
   Itallina Transportes - tokens
   Fonte: MANUAL IDENTIDADE VISUAL ITALLINA (14p)
   Azul primario #002677 = Pantone 2147 C (decisao do cliente, 11/08/2026)
   ============================================================ */

:root {
  /* --- marca --------------------------------------------------- */
  --navy:        #002677;   /* primaria oficial, Pantone 2147 C */
  --navy-fundo:  #001A50;   /* mesma matiz, mais escura: fundos cheios */
  --navy-poco:   #001233;   /* mais profunda: rodape e sobreposicoes */
  --navy-claro:  #0A3A96;   /* hover e estados ativos */
  --gelo:        #DBE2E9;   /* secundaria oficial, Pantone 649 C */
  --cinza-marca: #D9D9D6;   /* secundaria oficial, Cool Gray 1 C */

  /* --- superficies e texto ------------------------------------- */
  --papel:       #FCFCFD;   /* fundo da pagina (nunca #fff puro) */
  --papel-2:     #F2F5F9;   /* superficie levemente elevada */
  --borda:       #DDE3EC;
  --tinta:       #10151F;   /* texto principal (nunca #000 puro) */
  --tinta-2:     #4E586B;   /* texto de apoio, 7.1:1 sobre --papel */
  --tinta-3:     #6B7488;   /* metadados, so em >=18px */

  /* --- semanticos (trocam no modo escuro) ---------------------- */
  --fundo:            var(--papel);
  --fundo-elevado:    var(--papel-2);
  --texto:            var(--tinta);
  --texto-apoio:      var(--tinta-2);
  --texto-fraco:      var(--tinta-3);
  --linha:            var(--borda);
  --secao-navy:       var(--navy);
  --secao-navy-texto: var(--papel);

  --acao-fundo:       var(--navy);
  --acao-texto:       var(--papel);
  --acao-fundo-hover: var(--navy-claro);
  --foco:             var(--navy-claro);

  /* marca aplicada sobre fundo claro. No escuro precisa clarear,
     senão o navy some contra o fundo. */
  --marca-sobre-fundo: var(--navy);

  /* --- tipografia ---------------------------------------------- */
  /* Cabin = primaria (titulos). Be Vietnam Pro = secundaria (corpo).
     Trocar a linha abaixo por 'Saira' devolve a especificacao do manual. */
  --fonte-titulo: "Cabin", ui-sans-serif, system-ui, sans-serif;
  --fonte-corpo:  "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif;

  /* escala fluida, base 16 */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-md:   clamp(1.125rem, 0.4vw + 1.03rem, 1.3125rem);
  --t-lg:   clamp(1.375rem, 1vw + 1.15rem, 1.75rem);
  --t-xl:   clamp(1.75rem, 2vw + 1.3rem, 2.5rem);
  --t-2xl:  clamp(2.125rem, 3.2vw + 1.35rem, 3.5rem);
  --t-3xl:  clamp(2.5rem, 4.4vw + 1.4rem, 4.25rem);

  /* --- raio (SHAPE LOCK) ---------------------------------------
     regra unica da pagina, seguida em todo componente:
       --r-lg  imagens e paineis grandes
       --r-md  cards
       --r-sm  inputs e botoes
     O kit da marca usa cantos muito arredondados em toda foto. */
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 10px;

  /* --- ritmo ---------------------------------------------------- */
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --largura: 1240px;
  --secao-y: clamp(4.5rem, 9vw, 8rem);

  /* --- sombras (tingidas na matiz da marca, nunca preto puro) ---- */
  --sombra-1: 0 1px 2px rgba(0, 18, 51, 0.06), 0 6px 18px rgba(0, 18, 51, 0.06);
  --sombra-2: 0 2px 4px rgba(0, 18, 51, 0.08), 0 18px 44px rgba(0, 18, 51, 0.12);

  /* --- movimento ------------------------------------------------ */
  --saida: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- camadas (escala unica, sem z-index avulso) ---------------- */
  --z-base: 1;
  --z-topo: 50;
  --z-menu: 60;
}

/* modo escuro: a marca vira superficie e a acao vira gelo,
   espelhando o logo negativado do manual (branco sobre navy). */
@media (prefers-color-scheme: dark) {
  :root {
    --fundo:            #0B1020;
    --fundo-elevado:    #141B30;
    --texto:            #E9EDF5;
    --texto-apoio:      #A9B3C6;
    --texto-fraco:      #8E99AE;
    --linha:            #26304A;
    --secao-navy:       #001A50;
    --secao-navy-texto: #EAEEF6;

    --acao-fundo:       var(--gelo);
    --acao-texto:       var(--navy-poco);
    --acao-fundo-hover: #FFFFFF;
    --foco:             #7FA0E8;

    /* mesma matiz do Pantone 2147 C, clareada para render no escuro */
    --marca-sobre-fundo: #86A6EE;

    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
    --sombra-2: 0 2px 4px rgba(0, 0, 0, 0.45), 0 18px 44px rgba(0, 0, 0, 0.5);
  }
}