/* ==========================================================================
   SEA ENERGY, Design Tokens v1.0
   Fonte única de verdade do visual. Ordem: primitivos → semânticos → tema.
   Contrastes WCAG verificados (ver index.html > Cores > Contraste).
   ========================================================================== */

@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/outfit-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}

:root{
  /* ---------- 1. PRIMITIVOS: cor ---------- */
  /* Azul Sea (extraído da logo: #0060FF) */
  --sea-blue-50:#EBF3FF; --sea-blue-100:#D6E7FF; --sea-blue-200:#ADCEFF; --sea-blue-300:#70A8FF;
  --sea-blue-400:#3380FF; --sea-blue-500:#0060FF; --sea-blue-600:#0050D6; --sea-blue-700:#003FAB;
  --sea-blue-800:#002E7D; --sea-blue-900:#001F57;
  /* Ciano "corrente" (fim do degradê do ícone) */
  --sea-cyan-400:#2DB4FF; --sea-cyan-500:#00A3F5; --sea-cyan-600:#0086CC;
  /* Marinho (fundos escuros; o preto da logo é #020305, o marinho dos geradores é #0F1C42) */
  --navy-950:#03060F; --navy-900:#060D1F; --navy-850:#0A1430; --navy-800:#0F1C42;
  --navy-700:#17285C; --navy-600:#24397A;
  /* Amarelo sinalização (faixa do infográfico hospitalar; usar com parcimônia) */
  --signal-300:#FFE17A; --signal-400:#FFD23F; --signal-500:#FFC400; --signal-600:#E0A800; --signal-700:#8A6500;
  /* Neutros frios */
  --slate-0:#FFFFFF; --slate-50:#F5F7FB; --slate-100:#EAEFF6; --slate-200:#D9E0EA; --slate-300:#B8C3D4;
  --slate-400:#8896AD; --slate-500:#617088; --slate-600:#46536A; --slate-700:#2E394D;
  --slate-800:#1B2434; --slate-900:#0E1522;
  /* Estados */
  --green-500:#12B76A; --green-700:#067647; --green-50:#ECFDF3;
  --red-500:#F04438;   --red-700:#B42318;   --red-50:#FEF3F2;

  /* Degradês de marca */
  --grad-brand:linear-gradient(135deg,#0060FF 0%,#00A3F5 100%);          /* ícone, botões, destaques */
  --grad-night:linear-gradient(180deg,#060D1F 0%,#0F1C42 100%);          /* heros e rodapé */
  --grad-glow:radial-gradient(60% 60% at 50% 0%,rgba(0,96,255,.35) 0%,rgba(0,96,255,0) 70%);
  --grad-signal:linear-gradient(135deg,#FFC400 0%,#FFD23F 100%);

  /* ---------- 2. PRIMITIVOS: tipografia ---------- */
  --font-display:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Escala fluida (mín. 375px → máx. 1280px) */
  --fs-display:clamp(2.75rem,1.9rem + 4.2vw,5rem);      /* 44 → 80 */
  --fs-h1:clamp(2.25rem,1.7rem + 2.7vw,3.75rem);        /* 36 → 60 */
  --fs-h2:clamp(1.75rem,1.4rem + 1.7vw,2.75rem);        /* 28 → 44 */
  --fs-h3:clamp(1.375rem,1.2rem + .9vw,1.875rem);       /* 22 → 30 */
  --fs-h4:1.25rem;                                      /* 20 */
  --fs-lead:clamp(1.125rem,1.05rem + .35vw,1.3125rem);  /* 18 → 21 */
  --fs-body:1rem;                                       /* 16 */
  --fs-small:.875rem;                                   /* 14 */
  --fs-caption:.75rem;                                  /* 12 */
  --lh-tight:1.08; --lh-heading:1.18; --lh-body:1.65;
  --ls-display:-.035em; --ls-heading:-.025em; --ls-overline:.14em;

  /* ---------- 3. PRIMITIVOS: espaço, forma, elevação ---------- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem; --space-10:8rem;
  --section-y:clamp(4rem,3rem + 5vw,7.5rem);
  --container:1200px; --container-narrow:760px; --gutter:clamp(1rem,.5rem + 2.5vw,2rem);

  --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-xl:14px; --radius-btn:6px; --radius-pill:999px;

  --shadow-xs:0 1px 2px rgba(6,13,31,.06);
  --shadow-sm:0 2px 8px rgba(6,13,31,.08);
  --shadow-md:0 8px 24px rgba(6,13,31,.10);
  --shadow-lg:0 20px 48px rgba(6,13,31,.16);
  --glow-blue:0 0 0 1px rgba(0,96,255,.5),0 8px 32px rgba(0,96,255,.35);
  --glow-signal:0 8px 28px rgba(255,196,0,.35);

  /* ---------- 4. PRIMITIVOS: movimento ---------- */
  --ease-out:cubic-bezier(.2,.7,.2,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:120ms; --dur-base:220ms; --dur-slow:420ms;

  /* ---------- 5. SEMÂNTICOS (tema claro = padrão das seções de conteúdo) ---------- */
  --bg:var(--slate-0);
  --bg-alt:var(--slate-50);              /* faixas alternadas */
  --surface:var(--slate-0);              /* cartões */
  --surface-sunken:var(--slate-100);
  --ink:var(--slate-900);                /* texto principal  18,3:1 */
  --ink-soft:var(--slate-600);           /* texto secundário  7,8:1 */
  --muted:var(--slate-500);              /* legendas, ≥5,0:1 só em fundo branco/claro */
  --line:var(--slate-200);
  --line-strong:var(--slate-300);
  --link:var(--sea-blue-600);            /* 6,7:1 */
  --link-hover:var(--sea-blue-700);
  --accent:var(--sea-blue-500);          /* botões, ícones, destaques (texto branco sobre ele = 5,1:1) */
  --accent-hover:var(--sea-blue-600);
  --accent-soft:var(--sea-blue-50);
  --on-accent:#fff;
  --focus:var(--sea-blue-500);
  --alert:var(--signal-500);             /* emergência, plantão 24h, avisos */
  --on-alert:var(--navy-900);            /* 12,1:1 */
  --success:var(--green-700); --success-bg:var(--green-50);
  --danger:var(--red-700);    --danger-bg:var(--red-50);
}

/* ---------- 6. TEMA ESCURO / SEÇÕES INVERSAS (herói, rodapé, faixa de CTA) ----------
   Use <section data-theme="dark"> ou .theme-dark. Não é "modo escuro do sistema":
   é uma superfície da identidade (a logo nasceu sobre fundo preto-marinho). */
[data-theme="dark"],.theme-dark{
  --bg:var(--navy-900);
  --bg-alt:var(--navy-850);
  --surface:var(--navy-800);
  --surface-sunken:var(--navy-950);
  --ink:#fff;                            /* 19,4:1 */
  --ink-soft:var(--slate-300);           /* 10,9:1 */
  --muted:var(--slate-400);              /* 6,5:1 */
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.24);
  --link:var(--sea-blue-300);            /* 8,0:1, o azul #0060FF puro NÃO serve para texto aqui (3,8:1) */
  --link-hover:#fff;
  --accent:var(--sea-blue-500);
  --accent-hover:var(--sea-blue-400);
  --accent-soft:rgba(0,96,255,.16);
  --focus:var(--sea-blue-300);
  --shadow-md:0 8px 28px rgba(0,0,0,.45);
  color:var(--ink);background:var(--bg);
}

/* ---------- 7. PONTE PARA O TEMA WORDPRESS (wp-site-profissional) ----------
   O esqueleto da skill usa estes nomes em assets/css/site.css.
   Copie este bloco para a :root do tema para herdar a identidade sem reescrever o CSS. */
:root{
  --brand:var(--navy-800);
  --brand-600:var(--navy-900);
  --tint:var(--bg-alt);
  --radius:var(--radius-md);
  --font-h:var(--font-display);
  --font-b:var(--font-body);
}

/* ---------- 8. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:var(--lh-heading);letter-spacing:var(--ls-heading);margin:0 0 .5em;text-wrap:balance}
h1{font-size:var(--fs-h1);font-weight:800}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}h4{font-size:var(--fs-h4)}
p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--link);text-underline-offset:.2em}a:hover{color:var(--link-hover)}
img,svg,video{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
::selection{background:var(--sea-blue-500);color:#fff}