/* ============================================================
   Trust Insight One — Fundação Visual
   ------------------------------------------------------------
   Base de cores, tipografia, espaçamentos e componentes
   derivada do Manual de Marca v1.0 (Estúdio Corre, set/2024).

   IMPORTANTE: Não criar cores ou fontes novas aqui sem
   conferir o manual primeiro. Toda interface deve consumir
   essas variáveis (ex: color: var(--ti-azul-escuro)).
   ============================================================ */

/* ---------- Tipografia (Google Fonts) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&family=Averia+Serif+Libre:ital,wght@0,400;0,700;1,400&display=swap');


/* ============================================================
   1. VARIÁVEIS CSS — Design Tokens da Trust Insight
   ============================================================ */
:root {

  /* ----- Paleta Principal (uso institucional) -----
     Sempre que precisar de cor "padrão" do sistema,
     escolher uma destas quatro. */
  --ti-azul-escuro:   #192847;  /* substitui o preto. Backgrounds de impacto, textos */
  --ti-azul-intenso:  #44A0C1;  /* destaque, botões primários, links */
  --ti-cinza-claro:   #E9E9E9;  /* substitui o branco. Backgrounds */
  --ti-cinza-escuro:  #404040;  /* uso mínimo, detalhes */
  --ti-branco:        #FFFFFF;  /* alternativa ao cinza claro */

  /* ----- Paleta Complementar (uso restrito) -----
     APENAS para gráficos, infográficos, dashboards e posts.
     Nunca usar no logo nem na comunicação institucional. */
  --ti-azul-medio:        #6EA6EA;
  --ti-roxo:              #514EC6;
  --ti-azul-suave:        #B8D9E3;
  --ti-amarelo:           #FEC870;
  --ti-laranja-suave:     #FC9B70;
  --ti-laranja-intenso:   #E86A38;

  /* ----- Cores de Feedback (proposta — não estão no manual) -----
     Escolhidas para conversar com a paleta principal. */
  --ti-sucesso:   #2E8B6B;  /* verde profundo, alinhado à sobriedade */
  --ti-aviso:     #E89B2C;  /* amarelo-mostarda, atenção sem alarme */
  --ti-erro:      #C84A4A;  /* vermelho contido, não berrante */
  --ti-info:      var(--ti-azul-intenso);

  /* ----- Visual v2 (5.10.20 / Rodada B) — protótipo Claude Design -----
     Fundo mais leve e frio, texto mais suave, bordas e raio de card padronizados.
     O #E9E9E9 (cinza-claro) segue só nos CABEÇALHOS de tabela. */
  --ti-fundo:        #f3f5f8;  /* fundo das páginas (era #E9E9E9) */
  --ti-borda:        #e4e8ee;  /* bordas de cards/inputs/tabelas */
  --ti-texto:        #1f2d3a;  /* texto padrão (um pouco mais suave que o navy) */
  --ti-texto-suave:  #5a6b7b;  /* rótulos, textos secundários */
  --ti-texto-mudo:   #8a97a4;  /* legendas, placeholders, timestamps */
  --ti-raio:         12px;     /* raio padrão de cards/painéis */
  /* Aliases do azul de ação (Rodada C): antes o fallback caía num roxo #3b4cca
     fora da paleta. Agora aponta para o azul-intenso da marca. */
  --ti-azul:         #44A0C1;
  --ti-azul-10:      #eef4f8;

  /* ----- Tipografia ----- */
  --ti-fonte-principal:  'Be Vietnam Pro', 'Calibri', 'Helvetica Neue', Arial, sans-serif;
  --ti-fonte-destaque:   'Averia Serif Libre', Georgia, 'Times New Roman', serif;
  --ti-fonte-sistema:    'Calibri', 'Helvetica Neue', Arial, sans-serif;

  /* Tamanhos seguindo a hierarquia do manual.
     Convertidos para rem (1rem = 16px) para serem responsivos. */
  --ti-fs-titulo-maior:   2.5rem;    /* 40px — até 60 caracteres */
  --ti-fs-titulo-menor:   3.75rem;   /* 60px — até 40 caracteres */
  --ti-fs-subtitulo:      1.25rem;   /* 20px — até 30 caracteres */
  --ti-fs-texto-curto:    1.125rem;  /* ~18px — até 90 caracteres */
  --ti-fs-texto-grande:   1rem;      /* 16px — >100 caracteres */
  --ti-fs-pequeno:        0.875rem;  /* 14px — auxiliares, labels */
  --ti-fs-micro:          0.75rem;   /* 12px — legendas, captions */

  /* Pesos */
  --ti-fw-leve:       300;
  --ti-fw-regular:    400;
  --ti-fw-medio:      500;
  --ti-fw-semi:       600;
  --ti-fw-bold:       700;
  --ti-fw-extra:      800;

  /* Entrelinhas (line-height) seguindo o manual */
  --ti-lh-titulo:        1.0;   /* títulos menores */
  --ti-lh-titulo-grande: 1.15;  /* títulos maiores */
  --ti-lh-subtitulo:     1.4;
  --ti-lh-texto-curto:   1.25;
  --ti-lh-texto-grande:  1.5;

  /* ----- Espaçamento ----- */
  --ti-esp-xs:   0.25rem;   /* 4px */
  --ti-esp-sm:   0.5rem;    /* 8px */
  --ti-esp-md:   1rem;      /* 16px */
  --ti-esp-lg:   1.5rem;    /* 24px */
  --ti-esp-xl:   2.5rem;    /* 40px */
  --ti-esp-xxl:  4rem;      /* 64px */

  /* ----- Bordas e raios ----- */
  --ti-raio-sm:   4px;
  --ti-raio-md:   8px;
  --ti-raio-lg:   16px;
  --ti-raio-pill: 999px;   /* botões em formato de pílula, como no site */

  /* ----- Sombras (sóbrias, sem exagero) ----- */
  --ti-sombra-sm: 0 1px 2px rgba(25, 40, 71, 0.06);
  --ti-sombra-md: 0 4px 12px rgba(25, 40, 71, 0.08);
  --ti-sombra-lg: 0 12px 32px rgba(25, 40, 71, 0.12);

  /* ----- Transições ----- */
  --ti-transicao-rapida:  150ms ease-out;
  --ti-transicao-padrao:  250ms ease-out;
  --ti-transicao-lenta:   400ms ease-out;
}


/* ============================================================
   2. RESET E BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  margin: 0;
  font-family: var(--ti-fonte-principal);
  font-weight: var(--ti-fw-regular);
  /* Visual v2 (Rodada B): base 14px, texto suave, fundo mais leve — mais denso. */
  font-size: 14px;
  line-height: 1.45;
  color: var(--ti-texto);
  background-color: var(--ti-fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   3. TIPOGRAFIA — Hierarquia conforme manual
   ============================================================ */
h1, .ti-titulo-maior {
  font-family: var(--ti-fonte-principal);
  font-size: var(--ti-fs-titulo-maior);
  line-height: var(--ti-lh-titulo-grande);
  font-weight: var(--ti-fw-bold);
  color: var(--ti-azul-escuro);
  margin: 0 0 var(--ti-esp-md) 0;
}

h2, .ti-titulo-menor {
  font-family: var(--ti-fonte-principal);
  font-size: var(--ti-fs-titulo-menor);
  line-height: var(--ti-lh-titulo);
  font-weight: var(--ti-fw-bold);
  color: var(--ti-azul-escuro);
  margin: 0 0 var(--ti-esp-md) 0;
}

h3, .ti-subtitulo {
  font-family: var(--ti-fonte-principal);
  font-size: var(--ti-fs-subtitulo);
  line-height: var(--ti-lh-subtitulo);
  font-weight: var(--ti-fw-semi);
  letter-spacing: 0.01em;
  color: var(--ti-azul-escuro);
  margin: 0 0 var(--ti-esp-sm) 0;
}

p, .ti-texto {
  font-size: var(--ti-fs-texto-grande);
  line-height: var(--ti-lh-texto-grande);
  margin: 0 0 var(--ti-esp-md) 0;
}

.ti-texto-curto {
  font-size: var(--ti-fs-texto-curto);
  line-height: var(--ti-lh-texto-curto);
}

/* Palavra de destaque dentro de um título — usa a serif.
   Tamanho = 110% do título que a envolve, conforme manual. */
.ti-destaque {
  font-family: var(--ti-fonte-destaque);
  font-style: italic;
  font-weight: var(--ti-fw-regular);
  color: var(--ti-azul-intenso);
  font-size: 1.1em;
}

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

a:hover, a:focus {
  color: var(--ti-azul-escuro);
  text-decoration: underline;
}

small, .ti-pequeno {
  font-size: var(--ti-fs-pequeno);
}


/* ============================================================
   4. BOTÕES — Estilo "pílula" inspirado no site
   ============================================================ */
.ti-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ti-esp-sm);
  /* Visual v2 (Rodada B): botão retângulo compacto (o pill fica só em chips/tags). */
  padding: 8px 14px;
  font-family: var(--ti-fonte-principal);
  font-size: 13px;
  font-weight: var(--ti-fw-semi);
  line-height: 1.4;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: all var(--ti-transicao-rapida);
  text-decoration: none;
}

.ti-btn:hover, .ti-btn:focus {
  text-decoration: none;
  box-shadow: var(--ti-sombra-sm);
}

/* Botão desabilitado: cinza e sem interação (feedback visual claro) */
.ti-btn:disabled, .ti-btn[disabled] {
  opacity: .45;
  filter: grayscale(.5);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.ti-btn-primario {
  background-color: var(--ti-azul-intenso);
  color: var(--ti-branco);
}

.ti-btn-primario:hover,
.ti-btn-primario:focus {
  background-color: var(--ti-azul-escuro);
  color: var(--ti-branco);
}

.ti-btn-secundario {
  background-color: transparent;
  color: var(--ti-azul-intenso);
  border-color: var(--ti-azul-intenso);
}

.ti-btn-secundario:hover,
.ti-btn-secundario:focus {
  background-color: var(--ti-azul-intenso);
  color: var(--ti-branco);
}

.ti-btn-escuro {
  background-color: var(--ti-azul-escuro);
  color: var(--ti-branco);
}

.ti-btn-escuro:hover,
.ti-btn-escuro:focus {
  background-color: var(--ti-azul-intenso);
}


/* ============================================================
   5. CARDS E SUPERFÍCIES
   ============================================================ */
.ti-card {
  background-color: var(--ti-branco);
  border: 1px solid var(--ti-borda);           /* v2: contorno suave */
  border-radius: var(--ti-raio);               /* v2: 12px (era 16px) */
  padding: var(--ti-esp-lg);
  box-shadow: var(--ti-sombra-sm);
  transition: box-shadow var(--ti-transicao-padrao);
}

.ti-card:hover {
  box-shadow: var(--ti-sombra-md);
}

.ti-card-escuro {
  background-color: var(--ti-azul-escuro);
  color: var(--ti-cinza-claro);
}


/* ============================================================
   6. FORMULÁRIOS
   ============================================================ */
.ti-input,
.ti-textarea,
.ti-select {
  width: 100%;
  padding: var(--ti-esp-sm) var(--ti-esp-md);
  font-family: var(--ti-fonte-principal);
  font-size: var(--ti-fs-texto-grande);
  color: var(--ti-azul-escuro);
  background-color: var(--ti-branco);
  border: 1.5px solid var(--ti-cinza-claro);
  border-radius: var(--ti-raio-md);
  transition: border-color var(--ti-transicao-rapida),
              box-shadow var(--ti-transicao-rapida);
}

.ti-input:focus,
.ti-textarea:focus,
.ti-select:focus {
  outline: none;
  border-color: var(--ti-azul-intenso);
  box-shadow: 0 0 0 3px rgba(68, 160, 193, 0.15);
}

.ti-label {
  display: block;
  font-size: var(--ti-fs-pequeno);
  font-weight: var(--ti-fw-semi);
  color: var(--ti-cinza-escuro);
  margin-bottom: var(--ti-esp-xs);
}


/* ============================================================
   7. GRAFISMOS — Círculo + fatia de círculo
   Componentes utilitários para reproduzir a identidade visual
   ============================================================ */

/* Círculo decorativo. Aceita modificadores .ti-grafismo--outline */
.ti-grafismo-circulo {
  display: inline-block;
  border-radius: 50%;
  background-color: var(--ti-azul-intenso);
}

.ti-grafismo-circulo--outline {
  background-color: transparent;
  border: 1px solid var(--ti-azul-intenso);
}

/* Fatia de círculo (formato semelhante a um triângulo arredondado).
   Construído usando clip-path para manter o formato do manual. */
.ti-grafismo-fatia {
  display: inline-block;
  background-color: var(--ti-azul-intenso);
  clip-path: polygon(0% 50%, 0% 0%, 100% 50%, 0% 100%);
  border-radius: 50%;
}


/* ============================================================
   8. UTILITÁRIOS
   ============================================================ */

/* Container responsivo padrão — 1600px aproveita monitores grandes sem
   esticar demais a leitura em telas ultrawide. */
.ti-container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--ti-esp-lg);
}

.ti-container--estreito {
  max-width: 720px;
}

/* Backgrounds */
.ti-bg-escuro    { background-color: var(--ti-azul-escuro); color: var(--ti-cinza-claro); }
.ti-bg-claro     { background-color: var(--ti-cinza-claro); color: var(--ti-azul-escuro); }
.ti-bg-branco    { background-color: var(--ti-branco);      color: var(--ti-azul-escuro); }
.ti-bg-intenso   { background-color: var(--ti-azul-intenso); color: var(--ti-branco); }

/* Texto */
.ti-texto-escuro    { color: var(--ti-azul-escuro); }
.ti-texto-intenso   { color: var(--ti-azul-intenso); }
.ti-texto-claro     { color: var(--ti-cinza-claro); }
.ti-texto-branco    { color: var(--ti-branco); }
.ti-texto-centro    { text-align: center; }

/* Acessibilidade */
.ti-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   9. RESPONSIVO — Reduções para telas pequenas
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --ti-fs-titulo-maior:  2rem;     /* 32px */
    --ti-fs-titulo-menor:  2.5rem;   /* 40px */
    --ti-fs-subtitulo:     1.125rem; /* 18px */
  }

  .ti-container {
    padding: 0 var(--ti-esp-md);
  }
}