/* =====================================================================
   Fleetime — tokens de design
   Direcao: sistema de design da AiA Solucoes, adaptado ao Fleetime.
   (A mesma identidade do FleetBuss: indigo e violeta, Sora e Manrope.)

   FONTE UNICA DA VERDADE. Nunca escreva cor solta no componente - se
   falta um token, acrescente aqui.

   ---------------------------------------------------------------------
   COMO A TROCA FOI FEITA, E POR QUE ASSIM

   `painel.css` inteiro fala com este arquivo, e so com ele: nao ha cor
   solta la dentro. Entao o visual novo entrou TROCANDO VALORES, com
   todos os 94 nomes preservados. Os 60 KB de CSS ja testados nao foram
   reescritos na vespera de um teste em campo.

   Consequencia visivel no nome: `--ft-teal-*` agora carrega o INDIGO da
   AiA. O nome e historico; renomear significa mexer em todas as regras
   que o usam, e isso vai junto com a proxima reforma do painel.css. Em
   regra nova, use `--ft-marca-*`.

   ---------------------------------------------------------------------
   O QUE FOI AJUSTADO NO SISTEMA DA AIA, COM A CONTA NA MAO

   Contraste medido pela formula da WCAG. O motorista le esta tela ao
   sol, entao o piso e 4,5:1 para texto e 3:1 para barra e icone.

   - O indigo da marca, #667eea, com texto branco da 3,66:1. Reprova
     como fundo de botao. A acao usa o MESMO tom um degrau abaixo,
     #5a67d8 (4,81:1). O degrade da marca continua, de #5a67d8 a
     #764ba2 - as duas pontas passam.
   - O cinza "muted" da AiA, #9ba3b6, da 2,53:1 sobre branco. Reprova
     para qualquer texto. Nao e usado em texto aqui.
   - O ambar de atencao, #f59e0b, da 2,15:1 como barra sobre branco.
     Reprova ate para elemento grafico. Vira #d97706 (3,19:1).
   - Na cabine escura tudo passa com folga: texto 16,8:1, secundario
     7,9:1, acao 8,5:1.
   ===================================================================== */

:root {
  /* ---- neutros (escala da AiA) ----
     Continuam se chamando `ink`. 900 e o fundo mais escuro, 50 o papel. */
  --ft-ink-900: #10132A;   /* fundo escuro */
  --ft-ink-800: #1C2040;   /* superficie elevada no escuro */
  --ft-ink-700: #2E3456;   /* borda no escuro */
  --ft-ink-500: #5F6987;   /* texto terciario (5,0:1 sobre a lateral) */
  --ft-ink-300: #A8B0CF;   /* texto secundario no escuro */
  --ft-ink-200: #E0E4EE;   /* borda no claro */
  --ft-ink-50:  #EEF0F5;   /* papel */
  --ft-branco:  #FFFFFF;

  /* ---- A CABINE ----
     Sempre escura, e com tokens proprios: clarear o painel do gestor nao
     pode clarear a cabine. Saem da escala neutra da AiA, levada um grau
     mais fundo, para que cabine e painel continuem sendo o mesmo produto.
     O DEGRAU entre fundo, cartao e borda e o que impede a tela de virar
     um bloco so - foi o defeito da versao anterior. */
  --ft-cabine-fundo:        #0B0E20;
  --ft-cabine-cartao:       #161A36;
  --ft-cabine-borda:        #2C3363;
  --ft-cabine-borda-fraca:  #3D4780;

  /* ---- marca: indigo -> violeta (AiA) ---- */
  --ft-marca-50:  #EEF0FD;
  --ft-marca-100: #C7D2FE;
  --ft-marca-200: #A5B4FC;  /* acao sobre fundo escuro */
  --ft-marca-400: #5A67D8;  /* acao sobre fundo claro (4,81:1 com branco) */
  --ft-marca-500: #667EEA;  /* o indigo da AiA: so em grafico e borda */
  --ft-marca-600: #4C51BF;  /* hover da acao */
  --ft-marca-700: #764BA2;  /* o violeta da AiA: ponta do degrade */
  --ft-marca-800: #3C366B;
  --ft-marca-900: #1E1B4B;
  --ft-degrade:   linear-gradient(135deg, #5A67D8 0%, #764BA2 100%);
  --ft-degrade-suave: linear-gradient(135deg, rgba(102, 126, 234, .10) 0%, rgba(118, 75, 162, .12) 100%);

  /* Nome historico. Ver o cabecalho. */
  --ft-teal-50:  var(--ft-marca-50);
  --ft-teal-100: var(--ft-marca-100);
  --ft-teal-200: var(--ft-marca-200);
  --ft-teal-400: var(--ft-marca-400);
  --ft-teal-600: var(--ft-marca-600);
  --ft-teal-800: var(--ft-marca-800);
  --ft-teal-900: var(--ft-marca-900);

  /* ---- semanticos de estado ----
     REGRA: cor NUNCA sozinha. Todo estado carrega cor + icone + forma
     (barra lateral de 4px). Cerca de 8% dos homens tem deficiencia de
     percepcao vermelho-verde, e a populacao de motoristas e
     majoritariamente masculina. Aqui isso e requisito, nao enfeite. */
  --ft-critico:        #DC2626;
  --ft-critico-bg:     #FEE2E2;
  --ft-critico-texto:  #991B1B;
  --ft-critico-icone:  "ti-alert-triangle";

  --ft-atencao:        #D97706;
  --ft-atencao-bg:     #FEF3C7;
  --ft-atencao-texto:  #92400E;
  --ft-atencao-icone:  "ti-clock-exclamation";

  --ft-ok:             #059669;
  --ft-ok-bg:          #D1FAE5;
  --ft-ok-texto:       #065F46;
  --ft-ok-icone:       "ti-circle-check";

  --ft-info:           #0284C7;
  --ft-info-bg:        #E0F2FE;
  --ft-info-texto:     #0C4A6E;
  --ft-info-icone:     "ti-info-circle";

  /* ---- tipografia ----
     Sora nos titulos, Manrope na interface: as duas do sistema da AiA.
     IBM Plex Mono em TODO dado numerico, e nao a JetBrains da lista da
     AiA: a Plex ja estava auto-hospedada e ja foi conferida no relogio
     grande e nas colunas do espelho. tabular-nums e OBRIGATORIO em hora,
     saldo e NSR: sem largura fixa as colunas do espelho dancam. */
  --ft-fonte:        "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ft-fonte-titulo: "Sora", "Manrope", system-ui, -apple-system, sans-serif;
  --ft-fonte-mono:   "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --ft-txt-display:  52px;  /* relogio do app */
  --ft-txt-titulo:   24px;
  --ft-txt-secao:    19px;
  --ft-txt-corpo:    16px;
  --ft-txt-rotulo:   14px;
  --ft-txt-apoio:    13px;
  --ft-txt-micro:    12px;  /* so em mono: NSR, hash */

  /* Manrope e mais leve que a Plex no mesmo numero: o "medio" do
     desenho anterior (500) vira 600 aqui para ter o mesmo peso na
     tela. 700 continua proibido - pesa demais em tela pequena. */
  --ft-peso-normal: 400;
  --ft-peso-medio:  600;

  --ft-linha-apertada: 1.1; /* display */
  --ft-linha-normal:   1.5;
  --ft-linha-folgada:  1.7; /* texto corrido */

  /* ---- espaco ---- */
  --ft-esp-1: 4px;
  --ft-esp-2: 8px;
  --ft-esp-3: 12px;
  --ft-esp-4: 16px;
  --ft-esp-5: 24px;
  --ft-esp-6: 32px;

  /* ---- alvos de toque ----
     O motorista opera de luva, no sol, dentro da cabine. O minimo de
     44px das diretrizes gerais NAO serve: 48 e o piso e a acao
     principal tem 68. O botao da AiA tem ~38px - aqui ele nao vale. */
  --ft-toque-min:        48px;
  --ft-toque-secundario: 56px;
  --ft-toque-principal:  68px;

  /* Raios da AiA: 8 no controle, 12 no cartao, 24 na tela. */
  --ft-raio-controle: 8px;
  --ft-raio-cartao:  12px;
  --ft-raio-tela:    24px;

  --ft-borda: 1px;
  --ft-borda-estado: 4px;   /* barra lateral do alerta */

  /* ---- elevacao e sobreposicao ----
     Duas alturas so, com a sombra azulada da AiA. */
  --ft-sombra-1: 0 1px 3px rgba(16, 19, 42, .06), 0 1px 2px rgba(16, 19, 42, .04);
  --ft-sombra-2: 0 4px 16px rgba(16, 19, 42, .10), 0 12px 36px rgba(16, 19, 42, .14);

  --ft-veu: rgba(16, 19, 42, .60);

  /* ---- camadas ----
     O aviso fica ACIMA do dialogo: erro de confirmacao aparece por
     cima da propria confirmacao. */
  --ft-camada-nav:     20;
  --ft-camada-veu:     40;
  --ft-camada-dialogo: 50;
  --ft-camada-aviso:   60;

  /* ---- movimento ----
     Curto de proposito. Animacao longa em painel operacional atrasa a
     leitura; quem confere ponto abre e fecha tela o dia inteiro. */
  --ft-transicao:       160ms;
  --ft-transicao-lenta: 240ms;
  --ft-easing: cubic-bezier(.4, 0, .2, 1);

  /* ---- larguras ----
     A quebra para telefone e 720px. CSS nao aceita variavel dentro de
     @media, entao o valor aparece literal nas consultas - se mudar
     aqui, mude tambem la. */
  --ft-larg-conteudo: 1100px;
  --ft-larg-caixa:    360px;  /* login, troca de senha */
  --ft-larg-dialogo:  460px;
  --ft-larg-aviso:    380px;
  --ft-quebra-movel:  720px;
  --ft-nav-altura:    64px;   /* barra inferior no telefone */

  /* ---- barra lateral (a do sistema da AiA) ---- */
  --ft-lateral-fundo:  #F4F5FB;
  --ft-lateral-hover:  #E9ECFB;
  --ft-lateral-borda:  #E0E4EE;
  --ft-lateral-texto:  #4A5373;
  --ft-lateral-apoio:  #5F6987;

  /* ---- semanticos: superficie clara (painel, espelho) ---- */
  --ft-fundo:            var(--ft-ink-50);
  --ft-superficie:       var(--ft-branco);
  --ft-superficie-alt:   #F4F5FB;
  --ft-texto:            #1C2040;
  --ft-texto-secundario: #4A5373;
  --ft-borda-cor:        var(--ft-ink-200);
  --ft-acao:             var(--ft-marca-400);
  --ft-acao-texto:       var(--ft-branco);
  --ft-acao-forte:       var(--ft-marca-600);  /* hover da acao */
  --ft-foco:             var(--ft-marca-500);  /* anel de foco */
}

/* ---- semanticos: superficie escura (app do motorista) ----
   O app do motorista e SEMPRE escuro, nao segue a preferencia do
   sistema. Motivo: reduz ofuscamento na cabine a noite e mantem o
   contraste do numero grande durante o dia. Trocar de tema mudaria a
   leitura no meio do turno. */
[data-ft-tema="escuro"] {
  --ft-fundo:            var(--ft-ink-900);
  --ft-superficie:       var(--ft-ink-800);
  --ft-superficie-alt:   var(--ft-ink-700);
  --ft-texto:            var(--ft-branco);
  --ft-texto-secundario: var(--ft-ink-300);
  --ft-borda-cor:        var(--ft-ink-700);
  --ft-acao:             var(--ft-marca-200);
  --ft-acao-texto:       var(--ft-marca-900);
  --ft-acao-forte:       var(--ft-marca-100);
  --ft-foco:             var(--ft-marca-200);

  --ft-critico-bg:    #3B1219;
  --ft-critico-texto: #FCA5A5;
  --ft-atencao-bg:    #3A2A0C;
  --ft-atencao-texto: #FCD34D;
  --ft-ok-bg:         #06291F;
  --ft-ok-texto:      #6EE7B7;

  /* No escuro a sombra some: o que separa as camadas e o contraste de
     superficie, nao o borrao preto sobre preto. */
  --ft-lateral-fundo: var(--ft-ink-900);
  --ft-lateral-hover: var(--ft-ink-800);
  --ft-lateral-borda: var(--ft-ink-700);
  --ft-lateral-texto: var(--ft-ink-300);
  --ft-lateral-apoio: var(--ft-ink-300);

  --ft-sombra-1: 0 1px 2px rgba(0, 0, 0, .40);
  --ft-sombra-2: 0 10px 28px rgba(0, 0, 0, .55);
  --ft-veu:      rgba(0, 0, 0, .70);
}

/* ---- dado numerico: sempre mono e tabular ---- */
.ft-dado {
  font-family: var(--ft-fonte-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}