/* base.css — fontes, tokens de design, reset e elementos comuns */

/* ---------- Fontes locais ---------- */
@font-face{font-family:'Familjen Grotesk';src:url('../fonts/familjen-grotesk-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Familjen Grotesk';src:url('../fonts/familjen-grotesk-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Familjen Grotesk';src:url('../fonts/familjen-grotesk-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- O tema claro é o padrão e vive no :root */
:root{
  color-scheme:light;

  /* superfícies */
  --bg:#E9EDF4;                     /* levemente mais fundo que o branco do card */
  --fg:#0B1220;
  --fg-2:#3D4A61;
  --muted:#55637A;
  --muted-2:#77859B;
  --line:rgba(11,18,32,.14);
  --line-soft:rgba(11,18,32,.08);

  /* painéis dos cards: no claro a profundidade vem da sombra, não da transparência */
  --panel-base:#FFFFFF;
  --panel-active-base:#FFFFFF;
  --panel:linear-gradient(180deg,rgba(11,18,32,.012),rgba(11,18,32,.028));
  --panel-active:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,0));
  --veil:rgba(233,237,244,.56);     /* recuo dos cards laterais */
  --shadow-card:0 20px 44px -28px rgba(11,18,32,.30);
  --shadow-active:0 36px 76px -28px rgba(11,18,32,.34);

  /* superfícies interativas */
  --hover-weak:rgba(11,18,32,.04);
  --hover-soft:rgba(11,18,32,.06);
  --hover-line:rgba(11,18,32,.30);
  --dot-idle:rgba(11,18,32,.18);
  --dot-hover:rgba(11,18,32,.4);
  --arrow-bg:rgba(255,255,255,.7);
  --node-glow:0 0 0 5px color-mix(in srgb,var(--card-acc) 18%,transparent);

  /* atmosfera de fundo */
  --glow-top:rgba(96,108,200,.12);
  --glow-acc:14%;
  --glow-track:13%;

  /* acentos derivados das marcas (escurecidos para o texto branco do CTA passar em contraste) */
  --c-danfe:#2C6BD8;
  --c-radar:#9A6C0B;
  --c-tributare:#1A7BAE;
  --acc:var(--c-danfe);            /* trocado pelo JS conforme o card ativo */
  --on-acc:#FFFFFF;                /* texto sobre a cor da marca */

  /* tipografia */
  --font-display:'Familjen Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* espaçamento e ritmo */
  --container:1360px;
  --header-h:75px;          /* 74px do conteudo + 1px do fio inferior */
  /* Altura reservada para a esteira de parceiros */
  --esteira-h:clamp(124px,17.5vh,168px);
  --pad:clamp(20px,4vw,48px);
  --radius:15px;

  /* ícones desenhados em CSS (usados como máscara, a cor vem do token) */
  --icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.8 9.6 17.9 19.5 6.6'/%3E%3C/svg%3E");

  --icon-alerta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 7.4v6'/%3E%3Cpath d='M12 16.6v.1'/%3E%3C/svg%3E");

  /* movimento */
  --ease:cubic-bezier(.22,.7,.24,1);
  --dur:620ms;
}

/* ---------- Tema escuro ---------- */
[data-theme="dark"]{
  color-scheme:dark;

  --bg:#060B16;
  --fg:#EDF1F7;
  --fg-2:#C3CCDB;
  --muted:#8A9AB4;
  --muted-2:#5E6E88;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.055);

  --panel-base:#080E1C;
  --panel-active-base:#0B1424;
  --panel:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  --panel-active:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.022));
  --veil:rgba(6,11,22,.55);
  --shadow-card:0 30px 70px -34px rgba(0,0,0,.8);
  --shadow-active:0 44px 100px -34px rgba(0,0,0,.85);

  --hover-weak:rgba(255,255,255,.04);
  --hover-soft:rgba(255,255,255,.06);
  --hover-line:rgba(255,255,255,.28);
  --dot-idle:rgba(255,255,255,.18);
  --dot-hover:rgba(255,255,255,.4);
  --arrow-bg:rgba(255,255,255,.02);
  --node-glow:0 0 18px 1px var(--card-acc);

  --glow-top:rgba(96,108,200,.20);
  --glow-acc:12%;
  --glow-track:11%;

  --c-danfe:#4E8CF0;
  --c-radar:#E8B04A;
  --c-tributare:#5CC6F2;
  --on-acc:#060B16;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
svg{flex:none}
/* o atributo hidden precisa vencer qualquer display definido em classe */
[hidden]{display:none !important}

body{
  background:var(--bg);
  color:var(--fg);
  transition:background-color 320ms var(--ease),color 320ms var(--ease);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Utilitários ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}

.eyebrow{
  display:flex;align-items:center;justify-content:center;gap:16px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2);
}
.eyebrow::before,.eyebrow::after{content:"";width:52px;height:1px;background:var(--line-soft)}

/* ---------- Botões ---------- */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:var(--radius);font-weight:500;white-space:nowrap;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),transform 260ms var(--ease);
}
.button svg{width:15px;height:15px;transition:transform 260ms var(--ease)}
.button:hover svg{transform:translateX(4px)}

.button--ghost{padding:10px 18px;border:1px solid var(--line);font-size:13.5px}
/* em telas estreitas o rótulo encurta para o cabeçalho não estourar */
.button__short{display:none}
.button--ghost:hover{border-color:var(--hover-line);background:var(--hover-weak)}

.button--solid{padding:15px 22px;background:var(--fg);color:var(--bg);font-weight:600;font-size:14px}
.button--solid:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* ---------- Acessibilidade ---------- */
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important}
}

/* Troca de tema — revelação circular a partir do botão Usa a View Transitions API */

/* Durante a troca, as transições comuns saem do caminho: a captura da View Transition */
html.trocando-tema,
html.trocando-tema *{transition:none !important}

/* As camadas velha e nova não devem esmaecer: a nova entra recortada por um círculo */
::view-transition-old(root),
::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:9999}

/* O ícone gira ao passar o mouse — a troca em si é a onda. */
.theme-toggle__icon{transition:transform 420ms var(--ease)}
.theme-toggle:hover .theme-toggle__icon{transform:rotate(35deg)}
.theme-toggle:active .theme-toggle__icon{transform:rotate(35deg) scale(.9)}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none}
}