/* =====================================================================
   Design Tokens — Complexo Hidrelétrico Paraíba do Sul
   Paleta azul derivada do logo oficial (#3E7A96, aprovado em 02/09/2026 — ver assets/img/ e logo-nova/).
   ===================================================================== */

:root {
  /* ---- Cores da marca (derivadas do logo aprovado em 02/09/2026 — símbolo #3E7A96) ---- */
  --azul-marca:      #3E7A96;   /* o azul do logo — acento, foco, nós concluídos, copas da APP; 4,74:1 sobre branco (AA em texto normal) */
  --azul-escuro:     #1F5069;   /* texto e UI — 8,7:1 sobre branco (AA/AAA); estruturas civis e marcadores sobre a água */
  --azul-profundo:   #0F2A38;   /* campo escuro: véu do hero, contato, rodapé, skip-link — 14,9:1 com branco */
  --azul-medio:      #6390A6;   /* voz gráfica calma: scrollbar, trilho condicional da timeline, sublinhado, hover de campo (3,5:1 sobre branco / 3,1:1 sobre azul-tint — só gráfico) */
  --azul-medio-claro:#78A0B5;   /* extremo claro do azul-médio */
  --laranja:         #E67923;   /* contraste 2,95:1 — NUNCA usar em texto; só decorativo (complementar do azul) */
  --laranja-texto:   #B85E12;   /* variante escurecida quando laranja precisar carregar texto (4,5:1) */

  /* ---- Água (regra do cliente: água é SEMPRE azul, em toda peça gráfica) ----
     Com o site em azul, a água se distingue por saturação e forma: é o azul mais vivo e puro do sistema,
     sempre em linha/traço; estruturas são formas preenchidas em azul-escuro. */
  --agua:        #2A6FB0;   /* 5,25:1 sobre branco / 4,63:1 sobre azul-tint — rio, fluxo, turbina, marcos 1 e 3 */
  --agua-tint:   #DCEBF7;   /* fundo suave de água quando precisar de campo */

  /* ---- Vegetação (APP no infográfico) — pedido do cliente, 02/09/2026: só as árvores ficam verdes, com tronco marrom.
     São as únicas cores fora do azul além do laranja; não usar em nenhum outro componente. ---- */
  --app-verde:   #3F8F4F;   /* copa das árvores (3,9:1 sobre azul-tint — uso gráfico) */
  --app-marrom:  #7A4B2A;   /* tronco */

  /* ---- Derivadas ---- */
  --azul-tint:       #EAF2F6;  /* fundos suaves de seção */
  --azul-tint-2:     #D6E4EC;  /* bordas e hovers suaves */

  /* ---- Neutros (levemente frios, na mesma matiz ~200°) ---- */
  --bg:        #FFFFFF;
  --surface:   #F7FAFB;
  --border:    #E1E8EC;
  --ink:       #1C2830;   /* texto principal */
  --ink-soft:  #41525C;   /* texto secundário */
  --muted:     #62727C;   /* legendas e metadados */

  /* ---- Tipografia ---- */
  --font-body: 'Schibsted Grotesk', 'Schibsted fallback', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, Consolas, monospace;

  --text-xs:   clamp(0.78rem, 0.74rem + 0.2vw, 0.85rem);
  --text-sm:   clamp(0.88rem, 0.84rem + 0.2vw, 0.95rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
  --text-lg:   clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --text-xl:   clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  --text-2xl:  clamp(1.8rem, 1.4rem + 2vw, 2.7rem);
  --text-hero: clamp(2.1rem, 1.6rem + 2.8vw, 3.4rem);

  /* ---- Espaçamento (escala 4px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --section-y: clamp(56px, 9vw, 112px);   /* respiro vertical entre seções */
  --container: 1160px;
  --gutter: clamp(20px, 4vw, 32px);

  /* ---- Forma ---- */
  --radius:    14px;
  --radius-sm: 8px;
  --radius-lg: 22px;

  /* ---- Elevação ---- */
  --shadow-sm: 0 1px 2px rgb(15 42 56 / 0.06);
  --shadow-md: 0 8px 24px -8px rgb(15 42 56 / 0.14);
  --shadow-lg: 0 18px 48px -16px rgb(15 42 56 / 0.22);

  /* ---- Motion ---- */
  --dur-fast:   160ms;
  --dur-base:   260ms;
  --dur-slow:   480ms;
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Camadas ---- */
  --z-sticky:  20;
  --z-drawer:  40;
  --z-toast:   50;

  --header-h: 68px;
}

/* Breakpoints de referência (usar os valores literais nas media queries):
   360px  smartphone pequeno   ·  768px  tablet
   1024px notebook             ·  1366px desktop */