/* ==========================================================================
   TOPCAM — Design Tokens
   Cores, tipografia e espaçamento centralizados.
   Qualquer ajuste de identidade visual deve ser feito SOMENTE aqui.
   ========================================================================== */

:root {

  /* -------------------------------------------------
     CORES
     Paleta: branco / preto / azul-marinho escuro + 1 cor de destaque.
     ⚠️ --color-accent é PROVISÓRIA (aguardando cor oficial da marca).
     ------------------------------------------------- */
  --color-white:        #FFFFFF;
  --color-black:        #0A0A0A;
  --color-navy:         #0A0A0A;   /* fundo escuro (hero, footer, blocos de destaque) — agora preto */
  --color-navy-light:   #2A2A2A;   /* variação para hover/estados sobre fundo escuro */

  --color-accent:       #D4222E;   /* vermelho corporativo */
  --color-accent-dark:  #A81824;   /* variação mais escura, usada em hover de botões */

  --color-text-primary:    var(--color-black);
  --color-text-secondary:  #4A4A4A;
  --color-text-inverse:    var(--color-white); /* texto sobre fundo escuro */

  --color-bg-light:  var(--color-white);
  --color-bg-dark:   var(--color-navy);

  --color-border:    #E2E2E2;

  /* -------------------------------------------------
     TIPOGRAFIA
     Uma única família, variando peso e tamanho (conforme direção visual definida).
     ------------------------------------------------- */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Escala tipográfica */
  --font-size-hero:       clamp(2.5rem, 5vw, 4.5rem);   /* headline do hero */
  --font-size-h1:         clamp(2rem, 3.5vw, 3rem);     /* títulos de seção */
  --font-size-h2:         clamp(1.5rem, 2.5vw, 2rem);
  --font-size-h3:         1.25rem;
  --font-size-body-lg:    1.125rem;  /* subtítulos, textos de destaque */
  --font-size-body:       1rem;      /* texto padrão */
  --font-size-small:      0.875rem;  /* legendas, textos secundários */

  --line-height-tight:  1.15;  /* headlines */
  --line-height-base:   1.6;   /* parágrafos */

  /* -------------------------------------------------
     ESPAÇAMENTO
     Escala usada em padding, margin e gaps do grid.
     ------------------------------------------------- */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2.5rem;
  --space-xl:   4rem;
  --space-2xl:  6rem;
  --space-3xl:  9rem;    /* respiro entre grandes seções (hero, blocos institucionais) */

  /* -------------------------------------------------
     LAYOUT
     ------------------------------------------------- */
  --container-max-width: 1280px;
  --radius-sm: 4px;
  --radius-md: 8px;       /* cantos arredondados de botões/CTAs */
  --radius-lg: 16px;

  /* Transições padrão para hover/estado */
  --transition-fast: 0.2s ease;
}