/* ColaboraPro | tokens.css
   Base visual minima e autossuficiente para qualquer tela nova da maquete
   (login, MFA, cadastro, suporte). Nao depende de site.css nem de home.css.
   Variaveis principais: marca --teal, --teal-action, --coral, --yellow, --ink,
   --blue-action; texto --text; fundos --paper, --light, --surface, --white;
   linhas --border, --border-sub. Raio: --r-sm 8px, --r-md 12px, --r-lg 20px,
   --r-xl 28px. Sombra: --sh-sm, --sh-md, --sh-lg, --sh-teal. Fonte: Figtree,
   importada aqui e exposta em --font-base. Botoes: .mh-btn (base e foco
   visivel), .mh-btn--lg, .mh-btn--teal (com o brilho ::after), .mh-btn--ink,
   .mh-btn--outline e .mh-btn--outline-white.
   Uso: <link rel="stylesheet" href="../site-comercial/assets/tokens.css">
   seguido da folha propria da tela. */

@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800&display=swap");

:root {
  --teal: #00CDB7;
  --teal-dark: #00b5a1;
  --teal-action: #007E73;
  --teal-action-hover: #006B62;
  --teal-06: rgba(0,205,183,0.06);
  --teal-10: rgba(0,205,183,0.10);
  --teal-20: rgba(0,205,183,0.20);
  --coral: #FF4757;
  --coral-text: #C72B3A;
  --coral-06: rgba(255,71,87,0.06);
  --coral-10: rgba(255,71,87,0.10);
  --yellow: #FFD600;
  --yellow-soft: #FFF4B8;
  --yellow-10: rgba(255,214,0,0.12);
  --ink: #0B3555;
  --ink-hover: #124A73;
  --blue-action: #0E4F73;
  --blue-action-hover: #12638F;
  --ink-04: rgba(11,53,85,0.04);
  --ink-06: rgba(11,53,85,0.06);
  --ink-10: rgba(11,53,85,0.08);
  --text: #111827;
  --light: #F4F5F8;
  --paper: #F8FAFD;
  --paper-off: #F2F5F9;
  --surface: #F7F8FA;
  --white: #FFFFFF;
  --border: #E5E7EB;
  --border-sub: rgba(11,53,85,0.08);
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --sh-sm: 0 1px 3px rgba(11,53,85,0.08), 0 1px 2px rgba(11,53,85,0.04);
  --sh-md: 0 4px 16px rgba(11,53,85,0.10), 0 2px 6px rgba(11,53,85,0.06);
  --sh-lg: 0 12px 40px rgba(11,53,85,0.14), 0 4px 12px rgba(11,53,85,0.08);
  --sh-teal: 0 10px 28px rgba(11,53,85,0.16);
}

/* Acrescimo da extracao: o nome da fonte tambem vira token, para a tela nova
   aplicar Figtree sem repetir a lista de familias. */
:root { --font-base: 'Figtree', -apple-system, sans-serif; }

/* Botoes */
.mh-btn {
  align-items: center;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: inline-flex;
  font-size: 15px;
  font-weight: 800;
  justify-content: center;
  min-height: 48px;
  padding: 14px 26px;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  white-space: nowrap;
}

.mh-btn:focus-visible { box-shadow: 0 0 0 4px rgba(255,214,0,.34), 0 10px 24px rgba(11,53,85,.16); outline: 0; }

.mh-btn--lg { font-size: 16px; min-height: 54px; padding: 16px 32px; }

.mh-btn--teal { position: relative; overflow: hidden; background: linear-gradient(180deg, #12638F 0%, var(--blue-action) 100%); border-color: var(--blue-action); color: #fff !important; }

.mh-btn--teal::after { content: ""; position: absolute; top: 0; left: -90%; width: 45%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.30), transparent); transform: skewX(-20deg); transition: left .55s ease; }

.mh-btn--teal:hover::after { left: 135%; }

.mh-btn--teal:hover { background: linear-gradient(180deg, #14709E 0%, var(--blue-action-hover) 100%); border-color: var(--blue-action-hover); box-shadow: 0 12px 28px rgba(14,79,115,.34); transform: translateY(-2px); }

.mh-btn--ink { background: var(--blue-action); border-color: var(--blue-action); color: #fff !important; }

.mh-btn--ink:hover { background: var(--blue-action-hover); border-color: var(--blue-action-hover); transform: translateY(-1px); }

/* WhatsApp: verde da marca, texto branco e o mesmo brilho do botao principal.
   O verde e um pouco mais fechado que o #25D366 puro para o branco ficar
   legivel (mesmo padrao de gradiente do .mh-btn--teal). */
.mh-btn--zap { position: relative; overflow: hidden; background: linear-gradient(180deg, #1EBE5B 0%, #0F8A46 100%); border-color: #0F8A46; color: #fff !important; }
.mh-btn--zap::after { content: ""; position: absolute; top: 0; left: -90%; width: 45%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.30), transparent); transform: skewX(-20deg); transition: left .55s ease; }
.mh-btn--zap:hover::after { left: 135%; }
.mh-btn--zap:hover { background: linear-gradient(180deg, #24CE68 0%, #0F8A46 100%); border-color: #0F8A46; box-shadow: 0 12px 28px rgba(15,138,70,.34); transform: translateY(-2px); }

.mh-btn--outline { background: transparent; border-color: rgba(11,53,85,.28); color: var(--ink) !important; }

.mh-btn--outline:hover { background: rgba(11,53,85,.07); border-color: var(--ink-hover); color: var(--ink-hover) !important; transform: translateY(-1px); }

.mh-btn--outline-white { background: transparent; border-color: rgba(255,255,255,.72); color: #fff !important; }

.mh-btn--outline-white:hover { background: rgba(255,255,255,.10); border-color: #fff; transform: translateY(-1px); }