/* =============================================================
   SPAR — Design tokens
   Fonte unica de verdade para cor, espacamento, tipografia,
   raios, sombras, foco e transicoes.
   Nao adicionar regras de componentes aqui: so variaveis.
   ============================================================= */

/* ---------- Tipografia da marca ---------- */
/* Transat Medium ja era usada como corpo do site.
   Acrescentado o Bold real (700) para os titulos deixarem de usar
   negrito sintetico. font-display:swap evita o texto invisivel
   enquanto a fonte carrega. */
@font-face {
  font-family: 'Transat';
  src: url('/static/fonts/TransatMedium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Transat';
  src: url('/static/fonts/TransatBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Cor: marca ---------- */
  --spar-red:              #e5012c;  /* vermelho institucional (titulos) */
  --spar-red-dark:         #c4161b;  /* vermelho de apoio (subtitulos)   */
  --spar-green:            #007954;  /* verde institucional (header/footer) */
  /* Os botoes usavam um verde proprio (#3b8033) que destoava do resto
     do site. Passam a usar o verde institucional. */
  --spar-green-action:     #007954;
  --spar-green-action-hover:#006042; /* estado hover do verde de accao   */
  --spar-green-text:       #206d35;  /* verde legivel sobre branco       */
  --spar-green-claro:      #3aa17c;  /* verde claro para estados hover   */

  /* ---------- Cor: neutros ---------- */
  --spar-ink:              #1a1a1a;  /* texto principal        */
  --spar-ink-muted:        #5c5c5c;  /* texto secundario (AA)  */
  --spar-ink-inverse:      #ffffff;
  --spar-line:             #d6d6d6;  /* bordas e separadores   */
  --spar-line-strong:      #b0b0b0;
  --spar-surface:          #ffffff;
  --spar-surface-alt:      #f5f6f5;  /* fundo de acalmia       */
  --spar-surface-sunken:   #eef1f2;
  --spar-surface-relevo:   #fcfdfc;  /* cartao levantado (com sombra) */

  /* ---------- Cor: estados ---------- */
  --spar-danger:           #c4161b;
  --spar-danger-bg:        #fdecec;
  --spar-bordo:            #800020;  /* resumo de erros dos formularios (texto branco) */
  --spar-success:          #1e7a45;
  --spar-success-bg:       #e8f4ec;

  /* ---------- Espacamento: escala de 8 px ---------- */
  --sp-0:  0;
  --sp-1:  4px;   /* meio-passo, so para ajustes opticos */
  --sp-2:  8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  32px;
  --sp-6:  40px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  80px;

  /* ---------- Tipografia: escala fluida ---------- */
  /* clamp(minimo, preferido, maximo) — os maximos preservam os
     tamanhos actuais em desktop; os minimos evitam o overflow a 375 px. */
  --fs-display: clamp(2rem,     1.15rem + 3.6vw, 3.75rem); /* 32 -> 60 */
  --fs-h1:      clamp(1.75rem,  1.30rem + 1.9vw, 2.50rem); /* 28 -> 40 */
  --fs-h2:      clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem); /* 22 -> 28 */
  --fs-h3:      clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);/* 18 -> 22 */
  --fs-body:    1rem;      /* 16 */
  --fs-sm:      0.875rem;  /* 14 — minimo para texto de apoio */
  --fs-xs:      0.75rem;   /* 12 — so etiquetas e metadados   */

  --lh-tight:   1.15;
  --lh-heading: 1.25;
  --lh-body:    1.55;

  --fw-regular: 500;  /* Transat Medium — o corpo do site */
  --fw-bold:    700;  /* Transat Bold */

  /* ---------- Raios ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* ---------- Sombras ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, .10);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);

  /* ---------- Foco ---------- */
  --focus-color: #005c9e;
  --focus-ring:  0 0 0 3px rgba(0, 92, 158, .40);

  /* ---------- Movimento ---------- */
  --t-fast: 120ms ease;
  --t-base: 200ms ease;

  /* ---------- Layout ---------- */
  --page-max:    1536px;
  --content-max: 1142px;
  /* Moldura: largura do conteudo de todas as paginas, alinhada com o
     cabecalho (esquerda do logotipo, direita da lampada). */
  --moldura-margem: clamp(16px, 4vw, 48px);
  --moldura: min(100% - 2 * var(--moldura-margem), var(--page-max) - 2 * var(--moldura-margem));
  --gutter:      var(--sp-4);
}

/* ---------- Foco visivel global ----------
   Ate aqui so os campos de formulario tinham indicacao de foco.
   Links, botoes e cartoes ficavam sem qualquer sinal para quem
   navega por teclado. */
:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- Respeitar a preferencia do sistema ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}