/* =====================================================================
   BLUHUB · TOKENS DE DESIGN
   Identidade padrão: BLU. A cor da empresa (opcional) entra em
   --cor-primaria e TODOS os tons abaixo são derivados dela.
   Os tokens derivados ficam em ":root, .tema" para que qualquer bloco
   com classe .tema (ex.: a página de demonstração) recalcule os tons
   com a própria cor.
   --cor-botao / --cor-botao-texto / --cor-marca-texto são ajustados
   por js/tema.js para garantir contraste AA (4,5:1).
   ===================================================================== */

:root {
  /* Marca BLU (fixa) */
  --blu-azul: #0A7CFF;
  --blu-azul-texto: #0B8AFF;
  --blu-apoio: #415D80;
  --blu-branco: #FFFFFF;

  /* Tipografia: Poppins para títulos/números/menu; Inter para leitura */
  --fonte-titulo: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --peso-numero: 300;
  --peso-titulo: 600;
  --tam-xs: 12px; --tam-sm: 13px; --tam-md: 15px; --tam-lg: 18px; --tam-xl: 24px; --tam-2xl: 32px; --tam-num: 36px;

  /* Raios */
  --raio-sm: 12px; --raio-md: 16px; --raio-lg: 22px; --raio-xl: 28px; --raio-pilula: 999px;

  /* Espaçamentos (base 4) */
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 20px; --esp-6: 24px; --esp-8: 32px; --esp-10: 40px;

  /* Celular primeiro: área mínima de toque e campo que não dá zoom no iPhone (16px) */
  --toque-min: 44px; --tam-campo-celular: 16px; --altura-barra-acao: 76px;
  --item-icone-reserva: 56px;  /* espaço do ícone/avatar ao lado do título de uma linha .item (celular) */

  /* Estados (pílulas pastel) — texto escuro do mesmo tom para AA */
  --sel-vermelho-fundo: #FDE7E9; --sel-vermelho-texto: #B4232F;
  --sel-laranja-fundo:  #FFF0DE; --sel-laranja-texto:  #A34E00;
  --sel-verde-fundo:    #E1F6EA; --sel-verde-texto:    #17703F;
  --wa-fundo: #EFEAE2; --wa-balao: #D9FDD3; --wa-texto: #111B21; --wa-hora: #667781;
  --sel-cinza-fundo:    #EDF1F6; --sel-cinza-texto:    #4A5B70;
  --alta: #17803F; --queda: #C62A36;

  --transicao: 160ms ease;

  /* Movimento (usado por css/movimento.css). Só opacity e transform. */
  --dur-rapida: 150ms;      /* hover, pressão, troca de cor */
  --dur-padrao: 250ms;      /* modal, aviso, item entrando/saindo */
  --dur-entrada: 400ms;     /* bloco da tela aparecendo */
  --curva-saida: cubic-bezier(.22, .61, .36, 1);   /* ease-out suave */
  --curva-entrada: cubic-bezier(.16, 1, .3, 1);    /* ease-out "expo", chega macio */
  --mov-desloc: 10px;       /* subida/descida padrão */
  --mov-elevar: -2px;       /* subida no hover */
  --mov-escala-hover: 1.02;
  --mov-escala-press: .98;
  --mov-escala-modal: .96;
  --mov-zoom-foto: 1.06;
  --mov-stagger: 45ms;      /* atraso entre blocos em sequência (máx. ~8 blocos ≈ 400ms) */
  --sombra-hover: 0 4px 10px rgba(16, 38, 74, .08), 0 22px 46px rgba(16, 38, 74, .13);
}
/* "Reduzir movimento": sem deslocamento nem escala; só cor/opacidade, instantâneo */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-rapida: 1ms; --dur-padrao: 1ms; --dur-entrada: 1ms; --mov-stagger: 0ms;
    --mov-desloc: 0px; --mov-elevar: 0px; --mov-escala-hover: 1; --mov-escala-press: 1; --mov-escala-modal: 1; --mov-zoom-foto: 1;
  }
}

/* ---------------------------------------------------------------------
   Tons derivados da cor ativa (claro)
   --------------------------------------------------------------------- */
:root, .tema {
  --cor-primaria: var(--blu-azul);
  --cor-botao: var(--cor-primaria);
  --cor-botao-texto: #FFFFFF;
  --cor-marca-texto: var(--cor-marca-texto-claro, var(--blu-azul-texto));

  --cor-50: color-mix(in oklch, var(--cor-primaria) 6%,  #FFFFFF);
  --cor-100: color-mix(in oklch, var(--cor-primaria) 12%, #FFFFFF);
  --cor-200: color-mix(in oklch, var(--cor-primaria) 22%, #FFFFFF);
  --cor-300: color-mix(in oklch, var(--cor-primaria) 40%, #FFFFFF);
  --cor-700: color-mix(in oklch, var(--cor-primaria) 78%, #0B1B33);
  --cor-800: color-mix(in oklch, var(--cor-primaria) 60%, #0B1B33);

  /* Gradiente fluido: mesmo matiz, variando luz e um leve giro de matiz */
  --grad-a: var(--cor-700);
  --grad-b: var(--cor-primaria);
  --grad-c: color-mix(in oklch, var(--cor-primaria) 62%, #FFFFFF);
  --grad-a: oklch(from var(--cor-primaria) calc(l - 0.12) c calc(h - 18));
  --grad-c: oklch(from var(--cor-primaria) calc(l + 0.14) calc(c * 0.8) calc(h + 22));
  --gradiente: linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 52%, var(--grad-c) 100%);
  --gradiente-suave: linear-gradient(135deg, var(--cor-100), var(--cor-50));
  --gradiente-borda: linear-gradient(135deg, var(--grad-a), var(--grad-c));

  /* Neutros (levemente tingidos pela cor ativa) */
  --fundo-app: color-mix(in oklch, var(--cor-primaria) 5%, #F6F8FB);
  --superficie: #FFFFFF;
  --superficie-2: color-mix(in oklch, var(--cor-primaria) 4%, #F8FAFC);
  --texto: #1B2B44;               /* nunca preto puro */
  --texto-apoio: var(--blu-apoio);
  --texto-suave: color-mix(in oklch, var(--blu-apoio) 75%, #FFFFFF);
  --linha: color-mix(in oklch, var(--cor-primaria) 8%, #E7ECF3);
  --trilho: color-mix(in oklch, var(--cor-primaria) 10%, #EEF2F7);
  --item-ativo: var(--cor-100);
  --sombra-1: 0 1px 2px rgba(16, 38, 74, .04), 0 6px 20px rgba(16, 38, 74, .05);
  --sombra-2: 0 2px 6px rgba(16, 38, 74, .06), 0 16px 40px rgba(16, 38, 74, .08);
  --sombra-cor: 0 10px 28px color-mix(in oklch, var(--cor-primaria) 28%, transparent);
  color-scheme: light;
}

/* ---------------------------------------------------------------------
   Tema escuro: automático (sistema) ou forçado pela empresa
   --------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]), :root:not([data-tema="claro"]) .tema:not([data-tema="claro"]) {
    --cor-50:  color-mix(in oklch, var(--cor-primaria) 10%, #111826);
    --cor-100: color-mix(in oklch, var(--cor-primaria) 20%, #131B2A);
    --cor-200: color-mix(in oklch, var(--cor-primaria) 30%, #141D2D);
    --cor-marca-texto: color-mix(in oklch, var(--cor-primaria) 70%, #FFFFFF);
    --fundo-app: color-mix(in oklch, var(--cor-primaria) 6%, #0C121C);
    --superficie: color-mix(in oklch, var(--cor-primaria) 4%, #151C28);
    --superficie-2: color-mix(in oklch, var(--cor-primaria) 6%, #1A2232);
    --texto: #E8EEF7;
    --texto-apoio: #A9BAD1;
    --texto-suave: #8396B0;
    --linha: color-mix(in oklch, var(--cor-primaria) 10%, #253045);
    --trilho: color-mix(in oklch, var(--cor-primaria) 12%, #222C3E);
    --item-ativo: color-mix(in oklch, var(--cor-primaria) 24%, #151C28);
    --sel-vermelho-fundo: #3A1A20; --sel-vermelho-texto: #FFB3BA;
    --sel-laranja-fundo:  #3A2716; --sel-laranja-texto:  #FFC98F;
    --sel-verde-fundo:    #15321F; --sel-verde-texto:    #8FE0AE;
    --wa-fundo: #0B141A; --wa-balao: #005C4B; --wa-texto: #E9EDEF; --wa-hora: #A5B7AF;
    --sel-cinza-fundo:    #232D3D; --sel-cinza-texto:    #B6C4D6;
    --alta: #5FD38D; --queda: #FF8A93;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --sombra-2: 0 2px 8px rgba(0, 0, 0, .35), 0 18px 44px rgba(0, 0, 0, .35);
    --sombra-hover: 0 4px 12px rgba(0, 0, 0, .35), 0 22px 48px rgba(0, 0, 0, .42);
    color-scheme: dark;
  }
}
:root[data-tema="escuro"], .tema[data-tema="escuro"] {
  --cor-50:  color-mix(in oklch, var(--cor-primaria) 10%, #111826);
  --cor-100: color-mix(in oklch, var(--cor-primaria) 20%, #131B2A);
  --cor-200: color-mix(in oklch, var(--cor-primaria) 30%, #141D2D);
  --cor-marca-texto: color-mix(in oklch, var(--cor-primaria) 70%, #FFFFFF);
  --fundo-app: color-mix(in oklch, var(--cor-primaria) 6%, #0C121C);
  --superficie: color-mix(in oklch, var(--cor-primaria) 4%, #151C28);
  --superficie-2: color-mix(in oklch, var(--cor-primaria) 6%, #1A2232);
  --texto: #E8EEF7;
  --texto-apoio: #A9BAD1;
  --texto-suave: #8396B0;
  --linha: color-mix(in oklch, var(--cor-primaria) 10%, #253045);
  --trilho: color-mix(in oklch, var(--cor-primaria) 12%, #222C3E);
  --item-ativo: color-mix(in oklch, var(--cor-primaria) 24%, #151C28);
  --sel-vermelho-fundo: #3A1A20; --sel-vermelho-texto: #FFB3BA;
  --sel-laranja-fundo:  #3A2716; --sel-laranja-texto:  #FFC98F;
  --sel-verde-fundo:    #15321F; --sel-verde-texto:    #8FE0AE;
  --wa-fundo: #0B141A; --wa-balao: #005C4B; --wa-texto: #E9EDEF; --wa-hora: #A5B7AF;
  --sel-cinza-fundo:    #232D3D; --sel-cinza-texto:    #B6C4D6;
  --alta: #5FD38D; --queda: #FF8A93;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  --sombra-2: 0 2px 8px rgba(0, 0, 0, .35), 0 18px 44px rgba(0, 0, 0, .35);
  --sombra-hover: 0 4px 12px rgba(0, 0, 0, .35), 0 22px 48px rgba(0, 0, 0, .42);
  color-scheme: dark;
}