/* ==========================================================================
   HIDROSENIOR 2026 — DESIGN TOKENS
   Fonte de verdade: manual v1.0/2026 pg. 09 (paleta) + pg. 10 (tipografia)
   NÃO editar valores oficiais sem consultar o brandbook.
   ========================================================================== */

:root {
  /* ===== BRAND — cores oficiais do manual (não alterar HEX) ===== */
  --brand-navy:   #062D50;   /* azul-marinho institucional */
  --brand-blue:   #007DB5;   /* azul institucional */
  --brand-cyan:   #08BCE0;   /* ciano — acento vibrante */
  --brand-gray:   #EEF3F6;   /* cinza gelo — background suave */
  --brand-white:  #FFFFFF;

  /* ===== BRAND DERIVADAS (opacidade — permitido pelo manual) ===== */
  --brand-navy-90:  rgba(  6,  45,  80, 0.90);
  --brand-navy-60:  rgba(  6,  45,  80, 0.60);
  --brand-navy-20:  rgba(  6,  45,  80, 0.20);
  --brand-navy-08:  rgba(  6,  45,  80, 0.08);
  --brand-cyan-20:  rgba(  8, 188, 224, 0.20);
  --brand-cyan-10:  rgba(  8, 188, 224, 0.10);

  /* ===== NEUTROS TÉCNICOS (preto/cinza, não são cor externa) ===== */
  --ink-900:      #0A0F14;   /* texto principal em fundo claro */
  --ink-700:      #2D3540;
  --ink-600:      #4A5563;   /* texto secundário */
  --ink-500:      #6B7684;
  --ink-300:      #A8B0BB;
  --line-subtle:  #E1E8ED;

  /* ===== TIPOGRAFIA — stack studio editorial (Google Fonts, gratuita) =====
     Bricolage Grotesque — display variable com personalidade editorial
     Instrument Sans     — grotesque neutro com carácter (foundry Instrument)
     JetBrains Mono      — dados técnicos, números, especificações
     Fallback termina em Arial (respeita manual pg. 10). */
  --font-display:  "Bricolage Grotesque", "Arial Narrow", Arial, Helvetica, sans-serif;
  --font-sans:     "Instrument Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif:    "Bricolage Grotesque", Georgia, "Times New Roman", Arial, sans-serif;
  --font-mono:     "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Escala fluida — mais agressiva no topo (studio editorial usa headlines maiores) */
  --fs-hero:     clamp(3.25rem,  7vw + 0.5rem,    7.5rem);    /* 52-120px */
  --fs-h2:       clamp(2.5rem,   4vw + 0.5rem,    4.25rem);   /* 40-68px */
  --fs-h3:       clamp(1.5rem,   1.5vw + 0.75rem, 2.125rem);  /* 24-34px */
  --fs-body-lg:  clamp(1.0625rem, 0.3vw + 0.95rem, 1.1875rem); /* 17-19px */
  --fs-body:     1rem;      /* 16 */
  --fs-caption:  0.8125rem; /* 13 */
  --fs-mono:     0.9375rem; /* 15 — mono precisa parecer técnico, não corpo */

  --lh-tight:   1.02;
  --lh-snug:    1.18;
  --lh-normal:  1.55;

  --ls-tight:  -0.035em;   /* headlines editoriais → tracking mais apertado */
  --ls-snug:   -0.015em;
  --ls-normal:  0;
  --ls-wide:    0.02em;
  --ls-uppercase: 0.14em;

  /* ===== ESPAÇAMENTO — grid 8px (sempre múltiplo) ===== */
  --s-0:  0;
  --s-1:  0.5rem;    /*   8 */
  --s-2:  1rem;      /*  16 */
  --s-3:  1.5rem;    /*  24 */
  --s-4:  2rem;      /*  32 */
  --s-5:  3rem;      /*  48 */
  --s-6:  4rem;      /*  64 */
  --s-7:  6rem;      /*  96 */
  --s-8:  8rem;      /* 128 */
  --s-9:  10rem;     /* 160 */

  /* ===== CONTAINER ===== */
  --container-max: 1440px;
  --container-pad: clamp(1rem, 3vw, 3rem);

  /* ===== BREAKPOINTS (para uso em JS via getComputedStyle) ===== */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ===== RADII, SOMBRAS, MOTION ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px  2px rgba(6, 45, 80, 0.08);
  --shadow-md: 0 4px 12px rgba(6, 45, 80, 0.12);
  --shadow-lg: 0 12px 32px rgba(6, 45, 80, 0.16);

  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  200ms;
  --dur-med:   400ms;
  --dur-slow:  800ms;
  --dur-intro: 2500ms;

  /* ===== Z-INDEX SCALE ===== */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-sticky:    50;
  --z-float:     60;
  --z-modal:     80;
  --z-overlay:  100;
}

/* Suporte a prefers-reduced-motion — obrigatório para hero animado */
@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;
  }
}