/* 4IT Smart Solutions | tokens de marca v2 (28/10/2026)
   Paleta azul e aço derivada do logotipo; Saira nos títulos, Manrope no texto. */


:root {
  /* paleta */
  --brand-azul-noite: #061733;   /* fundos escuros, capa, rodapé */
  --brand-safira: #0A3A8C;       /* primária: botões, títulos de destaque */
  --brand-azul-ativo: #1F5FD6;   /* links, interações, foco */
  --brand-azul-luz: #6FA2FF;     /* detalhes sobre fundo escuro, nunca texto no branco */
  --brand-grafite: #18202B;      /* texto principal */
  --brand-aco: #7D8894;          /* ícones, linhas, texto grande (3,6:1 no branco) */
  --brand-branco: #FFFFFF;
  --brand-nevoa: #F3F6FA;
  --brand-borda: #DCE3EC;

  /* aço metálico: só logotipo e peças de destaque */
  --brand-aco-metalico: linear-gradient(180deg, #C9D0D6 0%, #8A949C 45%, #4D565E 55%, #7E878F 100%);

  /* papéis */
  --color-bg: var(--brand-branco);
  --color-bg-subtle: var(--brand-nevoa);
  --color-bg-inverse: var(--brand-azul-noite);
  --color-text: var(--brand-grafite);
  --color-text-muted: #5A6573;   /* 5,9:1 no branco, para texto secundário pequeno */
  --color-text-inverse: var(--brand-branco);
  --color-primary: var(--brand-safira);
  --color-primary-hover: var(--brand-azul-ativo);
  --color-link: var(--brand-azul-ativo);
  --color-accent-on-dark: var(--brand-azul-luz);
  --color-border: var(--brand-borda);
  --color-focus: var(--brand-azul-ativo);

  /* tipografia */
  --font-display: "Saira", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-text: "Manrope", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --weight-display: 600;
  --weight-text: 400;
  --weight-text-strong: 600;

  --size-h1: clamp(40px, 4.5vw, 56px);
  --size-h2: clamp(28px, 3vw, 36px);
  --size-body: 17px;
  --size-small: 13px;
  --size-label: 11.5px;
  --tracking-label: 0.08em;

  /* forma */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --diag-angle: 20deg;           /* ângulo das faixas, o mesmo do símbolo */
}

body {
  font-family: var(--font-text);
  font-weight: var(--weight-text);
  font-size: var(--size-body);
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  color: var(--brand-azul-noite);
  letter-spacing: 0;
}

h1 { font-size: var(--size-h1); line-height: 1.1; }
h2 { font-size: var(--size-h2); line-height: 1.15; }

.label {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-link);
}

a { color: var(--color-link); }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--weight-text-strong);
  border-radius: var(--radius-sm);
}
.btn-primary:hover { background: var(--color-primary-hover); }