/* ============================================================
   HIDROSTATION — tokens do portal
   Valores exactos do design system do site novo.
   Colocar em app/static/css/hidrostation-tokens.css e carregar
   PRIMEIRO, antes de hidrostation-portal.css.
   ============================================================ */
:root{
/* ---------- Marca ---------- */
--navy:#2f3390;--navy-hover:#23266e;--navy-deep:#181a4d;
--cyan:#29b8d8;--cyan-light:#5bcbe3;--cyan-bg:#eaf7fb;--cyan-text:#0e7a94;--cyan-glow:rgba(41,184,216,.4);

/* ---------- Superfícies ---------- */
--bg:#ffffff;--bg-soft:#f5f6f8;--bg-card:#ffffff;--bg-card-soft:#f8f9fb;--row-hover:#f8fafc;

/* ---------- Texto ---------- */
--text:#1b1d2a;--text-soft:#6b6f80;--text-mute:#9a9eae;--text-chip:#3a3d52;
--on-navy-body:#b9bce0;--on-navy-meta:#8b8fc6;--on-cyan:#0e1030;

/* ---------- Linhas ---------- */
--rule:#ecedf2;--rule-strong:#e5e7ee;--rule-pill:#d8dae6;--rule-footer:#e2e4ec;--rule-nav:rgba(0,0,0,.06);
--rule-row:#f2f3f7; /* divisórias dentro de tabelas/cartões */

/* ---------- Gradientes ---------- */
--grad-cta:linear-gradient(135deg,#23266e,#2f3390);
--grad-hero:linear-gradient(180deg,#fff 0%,#f8fafc 100%);
--grad-glow-dark:radial-gradient(circle at 70% 30%,rgba(41,184,216,.18) 0%,transparent 50%),radial-gradient(circle at 20% 70%,rgba(47,51,144,.35) 0%,transparent 50%);

/* ---------- Sobre navy escuro ---------- */
--on-dark-panel:rgba(255,255,255,.05);--on-dark-border:rgba(255,255,255,.1);
--on-dark-pill:rgba(255,255,255,.08);--on-dark-pill-border:rgba(255,255,255,.18);
--on-dark-accent-bg:rgba(41,184,216,.12);--on-dark-accent-border:rgba(41,184,216,.3);

/* ---------- Aliases semânticos ---------- */
--primary:var(--navy);--primary-hover:var(--navy-hover);
--accent:var(--cyan);--accent-soft:var(--cyan-bg);--accent-on-soft:var(--cyan-text);
--text-heading:var(--text);--text-body:var(--text-soft);--text-caption:var(--text-mute);
--surface-page:var(--bg);--surface-alt:var(--bg-soft);--surface-card:var(--bg-card);
--surface-card-soft:var(--bg-card-soft);--surface-dark:var(--navy-deep);
--border-subtle:var(--rule);--border-default:var(--rule-strong);
--link:var(--navy);--link-hover:var(--navy-hover);--focus-ring:rgba(41,184,216,.18);

/* ---------- Tipografia ---------- */
--font-sans:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',system-ui,sans-serif;
--font-display:var(--font-sans);--font-body:var(--font-sans);
--fs-hero:clamp(3rem,7vw,5.5rem);
--fs-page-title:clamp(2rem,4vw,3rem);
--fs-section-title:clamp(2rem,3.5vw,2.75rem);
--fs-section-title-sm:clamp(1.6rem,3vw,2.5rem);
--fs-split-title:1.875rem;
--fs-card-title-lg:1.5rem;--fs-card-title:1.31rem;--fs-card-title-sm:1.15rem;
--fs-lead:clamp(1.05rem,2vw,1.3rem);
--fs-body:1rem;--fs-body-sm:.94rem;--fs-body-xs:.875rem;
--fs-nav:.845rem;--fs-eyebrow:.75rem;--fs-meta:.72rem;--fs-micro:.68rem;
--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;
--ls-hero:-.03em;--ls-display:-.02em;--ls-card:-.015em;--ls-tight:-.01em;
--ls-eyebrow:.12em;--ls-eyebrow-wide:.14em;--ls-meta:.06em;
--lh-hero:1.02;--lh-display:1.08;--lh-title:1.15;--lh-body:1.5;
--lh-lead:1.45;--lh-prose:1.55;--lh-prose-long:1.75;

/* ---------- Espaçamento ---------- */
--space-1:4px;--space-2:6px;--space-3:8px;--space-4:10px;--space-5:12px;--space-6:14px;
--space-7:16px;--space-8:18px;--space-9:20px;--space-10:22px;--space-11:24px;--space-12:26px;
--space-13:28px;--space-14:32px;--space-15:34px;--space-16:36px;--space-17:40px;--space-18:44px;
--space-19:48px;--space-20:56px;--space-21:60px;--space-22:64px;--space-23:72px;--space-24:76px;--space-25:84px;
--section-py:84px;--section-px:56px;--section-py-mobile:64px;--section-px-mobile:20px;
--section-gap-title:44px;
--content-max:1400px;--content-narrow:1200px;--content-prose:820px;--content-lead:560px;
--nav-h:60px;--nav-py:16px;--sticky-offset:120px;
--grid-gap:18px;--grid-gap-lg:24px;--card-pad:32px;

/* ---------- Raios ---------- */
--radius-pill:999px;--radius-input:10px;--radius-thumb:14px;--radius-panel:18px;
--radius-card:20px;--radius-table:20px;--radius-card-soft:22px;--radius-card-lg:24px;
--radius-cta:28px;--radius-circle:50%;

/* ---------- Sombras (sempre navy, nunca preto) ---------- */
--shadow-sm:0 1px 3px rgba(20,24,80,.05);
--shadow-md:0 6px 24px rgba(20,24,80,.06);
--shadow-lg:0 16px 44px rgba(20,24,80,.13);
--shadow-card-hover:0 14px 36px rgba(20,24,80,.1);
--shadow-card-hover-strong:0 16px 40px rgba(20,24,80,.13);
--shadow-dark-hover:0 18px 48px rgba(20,24,80,.3);
--shadow-cyan:0 10px 30px rgba(41,184,216,.4);
--shadow-cyan-soft:0 8px 28px rgba(41,184,216,.15);
--shadow-navy:0 10px 30px rgba(47,51,144,.25);
--shadow-focus:0 10px 34px rgba(41,184,216,.18);

/* ---------- Movimento ---------- */
--dur-color:.2s;--dur-transform:.25s;--dur-slow:.4s;--dur-reveal:.7s;--ease:ease;
--lift-card:translateY(-4px);--lift-card-lg:translateY(-5px);
--lift-btn:translateY(-2px);--lift-nav:translateY(-1px);--stagger:.08s;
}

@keyframes hsFadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes hsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes hsPulse{0%,100%{box-shadow:0 0 0 0 rgba(41,184,216,.35)}50%{box-shadow:0 0 0 10px rgba(41,184,216,0)}}

.reveal{opacity:0;transform:translateY(22px);transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}