/* ============================================================
   HydroAI — Design Tokens v1.0
   Fonte da verdade das cores, tipografia e espaçamento da marca.
   Importar antes de qualquer folha de estilo de componente.

   Fontes (Google Fonts):
   https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@600;700&family=Archivo:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap
   ============================================================ */

/* ---------- Paleta bruta (não usar direto em componentes) ---------- */
:root {
  --hy-abissal: #061E2E;   /* fundo escuro / texto sobre claro   */
  --hy-batial:  #0A3149;   /* painéis sobre o abissal            */
  --hy-sonar:   #21C7E0;   /* cor de ação da marca               */
  --hy-laguna:  #0E7C9C;   /* apoio do ciano                     */
  --hy-nevoa:   #EAF3F7;   /* fundo claro / texto sobre escuro   */

  --hy-alga:  #3ED598;     /* estado: normal                     */
  --hy-boia:  #FFB454;     /* estado: atenção                    */
  --hy-coral: #FF6B5E;     /* estado: crítico                    */

  --hy-grad-marca: linear-gradient(180deg, #21C7E0 0%, #0E7C9C 55%, #061E2E 100%);

  /* ---------- Tipografia ---------- */
  --hy-font-display: "Chakra Petch", "Archivo", system-ui, sans-serif;
  --hy-font-texto:   "Archivo", system-ui, -apple-system, sans-serif;
  --hy-font-dados:   "JetBrains Mono", Consolas, "Courier New", monospace;

  --hy-escala-xs: 0.75rem;    /* rótulos, eyebrows                */
  --hy-escala-sm: 0.875rem;   /* apoio, legendas                  */
  --hy-escala-md: 1rem;       /* corpo                            */
  --hy-escala-lg: 1.25rem;    /* lide, destaque de corpo          */
  --hy-escala-xl: 1.75rem;    /* título de seção                  */
  --hy-escala-2xl: 2.5rem;    /* título de página                 */
  --hy-escala-3xl: 3.5rem;    /* hero                             */

  /* ---------- Espaço e forma ---------- */
  --hy-esp-1: 0.25rem;
  --hy-esp-2: 0.5rem;
  --hy-esp-3: 1rem;
  --hy-esp-4: 1.5rem;
  --hy-esp-5: 2.5rem;
  --hy-esp-6: 4rem;
  --hy-raio-sm: 4px;
  --hy-raio-md: 10px;
  --hy-raio-pill: 999px;

  /* ============================================================
     Tokens semânticos — TEMA CLARO (Névoa) — padrão
     ============================================================ */
  --hy-fundo:          var(--hy-nevoa);
  --hy-superficie:     #FFFFFF;
  --hy-superficie-2:   #DCEAF1;          /* névoa mais densa               */
  --hy-texto:          var(--hy-abissal);
  --hy-texto-suave:    #3A5A6E;          /* neutro com viés azul           */
  --hy-borda:          #C3D8E2;
  --hy-acao:           var(--hy-laguna); /* sobre claro, laguna dá AA      */
  --hy-acao-forte:     #0A6483;
  --hy-acao-tinta:     #FFFFFF;          /* texto sobre a cor de ação      */
  --hy-realce:         var(--hy-sonar);  /* só em elementos grandes/gráficos */
}

/* Tema escuro pelo sistema (sem escolha explícita do usuário) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hy-fundo:        var(--hy-abissal);
    --hy-superficie:   var(--hy-batial);
    --hy-superficie-2: #0D3C58;
    --hy-texto:        var(--hy-nevoa);
    --hy-texto-suave:  #9DBACB;
    --hy-borda:        #14496A;
    --hy-acao:         var(--hy-sonar);
    --hy-acao-forte:   #5CD9EC;
    --hy-acao-tinta:   var(--hy-abissal);
    --hy-realce:       var(--hy-sonar);
  }
}

/* Tema escuro por escolha explícita */
:root[data-theme="dark"] {
  --hy-fundo:        var(--hy-abissal);
  --hy-superficie:   var(--hy-batial);
  --hy-superficie-2: #0D3C58;
  --hy-texto:        var(--hy-nevoa);
  --hy-texto-suave:  #9DBACB;
  --hy-borda:        #14496A;
  --hy-acao:         var(--hy-sonar);
  --hy-acao-forte:   #5CD9EC;
  --hy-acao-tinta:   var(--hy-abissal);
  --hy-realce:       var(--hy-sonar);
}

/* ---------- Base mínima ---------- */
body {
  background: var(--hy-fundo);
  color: var(--hy-texto);
  font-family: var(--hy-font-texto);
  font-size: var(--hy-escala-md);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--hy-font-display);
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}

/* Rótulo/eyebrow padrão da marca */
.hy-rotulo {
  font-family: var(--hy-font-dados);
  font-size: var(--hy-escala-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hy-acao);
}

/* Números tabulares em dados */
.hy-dados, table td, table th {
  font-variant-numeric: tabular-nums;
}

/* Pulso de sonar para estados "ao vivo" */
@keyframes hy-pulso {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hy-realce) 55%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}
.hy-vivo { animation: hy-pulso 1.8s ease-out infinite; border-radius: var(--hy-raio-pill); }
@media (prefers-reduced-motion: reduce) {
  .hy-vivo { animation: none; }
}