/* =============================================================
   Farthec — Fundação: reset, tokens de design e tipografia.
   Todo o resto do CSS consome as variáveis definidas aqui.
   Trocar a marca do site é trocar os valores deste arquivo.
   ============================================================= */

:root {
  /* --- Cores da marca --- */
  --azul-600: #2e6be6;
  --azul-500: #3ba5f0;
  --gradiente-primario: linear-gradient(135deg, #2e6be6 0%, #3ba5f0 100%);

  /* --- Texto --- */
  --texto-forte: #1a1d29;
  --texto-suave: #5b6172;
  --texto-fraco: #8b90a0;
  --texto-invertido: #ffffff;

  /* --- Superfícies --- */
  --fundo: #f6f8fc;
  --fundo-alt: #eef1fb;
  --superficie: #ffffff;
  --borda: #e3e6ef;
  --borda-forte: #cfd4e3;

  /* --- Status --- */
  --verde: #1fa971;
  --verde-fraco: #e6f6ef;
  --vermelho: #e5484d;
  --vermelho-fraco: #fdeced;
  --amarelo: #f5a623;
  --amarelo-fraco: #fef5e6;
  --azul-fraco: #e8f0fe;

  /* --- Raios --- */
  --raio-sm: 8px;
  --raio: 12px;
  --raio-lg: 16px;
  --raio-full: 999px;

  /* --- Sombras: suaves, em camadas, nunca duras --- */
  --sombra-sm: 0 1px 2px rgba(26, 29, 41, 0.04), 0 1px 3px rgba(26, 29, 41, 0.06);
  --sombra: 0 2px 4px rgba(26, 29, 41, 0.04), 0 4px 12px rgba(26, 29, 41, 0.08);
  --sombra-lg: 0 8px 16px rgba(26, 29, 41, 0.06), 0 16px 40px rgba(26, 29, 41, 0.12);
  --sombra-azul: 0 4px 14px rgba(46, 107, 230, 0.3);

  /* --- Espaçamento (escala de 4px) --- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --e-9: 96px;

  /* --- Tipografia --- */
  --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- Movimento --- */
  --transicao-rapida: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicao: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicao-lenta: 320ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Camadas --- */
  --z-sidebar: 100;
  --z-cabecalho: 200;
  --z-flutuante: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* --- Layout --- */
  --largura-max: 1180px;
  --sidebar-largura: 264px;
  --sidebar-recolhida: 76px;
}

/* --- Reset ------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Compensa o cabeçalho fixo ao navegar por âncoras (#planos). */
  scroll-padding-top: 88px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto-forte);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Impede que um elemento largo (tabela, chat) role a página inteira. */
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: var(--azul-600);
  text-decoration: none;
  transition: color var(--transicao-rapida);
}

a:hover {
  color: var(--azul-500);
}

ul,
ol {
  list-style: none;
}

/* --- Tipografia -------------------------------------------- */

h1,
h2,
h3,
h4 {
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.05rem; }

/* --- Utilitários ------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--e-5);
}

/* Esconde visualmente, mas mantém para leitores de tela. */
.sr-apenas {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.oculto {
  display: none !important;
}

.texto-suave { color: var(--texto-suave); }
.texto-centro { text-align: center; }

/* Anel de foco visível, mas só para navegação por teclado. */
:focus-visible {
  outline: 2px solid var(--azul-600);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

/* --- Acessibilidade: respeita quem pediu menos movimento ---- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================
   MODO ESCURO
   Só redefinimos os tokens de cor. Como todo o CSS consome estas
   variáveis, o tema escuro se propaga por todas as telas — landing,
   login e painel — sem tocar em nenhum componente.
   O atributo data-tema é gravado em <html> pelo tema-inicial.js,
   antes da página pintar, para não haver "flash" de tela clara.
   ============================================================= */

:root[data-tema='escuro'] {
  --azul-600: #4d86f0;
  --azul-500: #63b3f5;
  --gradiente-primario: linear-gradient(135deg, #3f7bec 0%, #52b0f2 100%);

  --texto-forte: #eceef4;
  --texto-suave: #a6adbf;
  --texto-fraco: #727a8d;
  --texto-invertido: #0e1119;

  --fundo: #0d1017;
  --fundo-alt: #151a25;
  --superficie: #1a1f2c;
  --borda: #2a3040;
  --borda-forte: #394155;

  --verde: #34c98a;
  --verde-fraco: rgba(52, 201, 138, 0.14);
  --vermelho: #f26a6f;
  --vermelho-fraco: rgba(242, 106, 111, 0.14);
  --amarelo: #f5b342;
  --amarelo-fraco: rgba(245, 179, 66, 0.14);
  --azul-fraco: rgba(77, 134, 240, 0.16);

  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);
  --sombra: 0 2px 6px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.45);
  --sombra-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 24px 60px rgba(0, 0, 0, 0.55);
  --sombra-azul: 0 4px 18px rgba(77, 134, 240, 0.4);
}

/* A troca de tema anima suavemente as superfícies principais. */
:root[data-tema] body {
  transition: background-color var(--transicao), color var(--transicao);
}