/* WebbFinanceiro v5 - CORE
   Build: 20260102_2000
   Regras: nada fora /css/v5/
*/

/* ========== TOKENS ========== */
:root{
  /* layout */
  --wf-container: 1120px;
  --wf-gutter: 16px;
  --wf-radius-1: 10px;
  --wf-radius-2: 16px;

  /* typography */
  --wf-font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --wf-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --wf-text-1: 16px;
  --wf-text-2: 18px;
  --wf-text-3: 22px;
  --wf-text-4: 28px;
  --wf-line: 1.6;

  /* colors (neutro e seguro para multi-país) */
  --wf-bg: #ffffff;
  --wf-surface: #f6f7f9;
  --wf-surface-2: #eef1f5;

  --wf-text: #111827;
  --wf-text-2: #374151;
  --wf-muted: #6b7280;

  --wf-border: #e5e7eb;

  --wf-link: #0b57d0;
  --wf-link-hover: #0842a0;

  --wf-shadow: 0 10px 30px rgba(0,0,0,.08);
  --wf-shadow-2: 0 4px 16px rgba(0,0,0,.08);

  /* spacing scale */
  --wf-1: 4px;
  --wf-2: 8px;
  --wf-3: 12px;
  --wf-4: 16px;
  --wf-5: 20px;
  --wf-6: 24px;
  --wf-7: 32px;
  --wf-8: 40px;
  --wf-9: 56px;

  /* z-index */
  --wf-z-header: 50;
  --wf-z-drawer: 60;
  --wf-z-sticky: 40;
}

/* ========== RESET (seguro) ========== */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family: var(--wf-font-sans);
  font-size: var(--wf-text-1);
  line-height: var(--wf-line);
  color: var(--wf-text);
  background: var(--wf-bg);
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--wf-link); text-decoration:none; }
a:hover{ color: var(--wf-link-hover); text-decoration:underline; }
button, input, select, textarea{ font: inherit; }
:focus-visible{ outline: 3px solid rgba(11,87,208,.35); outline-offset: 2px; }

/* ========== LAYOUT BASE ========== */
.wf-container{
  max-width: var(--wf-container);
  margin: 0 auto;
  padding: 0 var(--wf-gutter);
}
.wf-stack{ display:flex; flex-direction:column; gap: var(--wf-6); }
.wf-surface{ background: var(--wf-surface); }
.wf-card{
  background: var(--wf-bg);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-2);
  box-shadow: var(--wf-shadow-2);
}
.wf-section{ padding: var(--wf-8) 0; }
.wf-hr{ border:0; border-top:1px solid var(--wf-border); margin: var(--wf-6) 0; }

/* ========== HEADER / NAV / FOOTER ========== */
.wf-header{
  position: sticky;
  top: 0;
  z-index: var(--wf-z-header);
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--wf-border);
}
.wf-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--wf-4);
  min-height: 68px;
}
.wf-logo{
  font-weight: 700;
  color: var(--wf-text);
  text-decoration:none;
  font-size: 18px;
}
.wf-nav__list{
  list-style:none;
  display:flex;
  align-items:center;
  gap: var(--wf-5);
  margin:0;
  padding:0;
}
.wf-nav__list a{
  color: var(--wf-text-2);
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 10px;
}
.wf-nav__list a:hover,
.wf-nav__list a:focus-visible{
  background: var(--wf-surface-2);
  color: var(--wf-text);
}
.wf-nav__toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--wf-border);
  background: var(--wf-bg);
  cursor:pointer;
}
.wf-nav__drawer{
  border-top:1px solid var(--wf-border);
  background: var(--wf-bg);
}
.wf-nav__list--stack{
  flex-direction:column;
  align-items:flex-start;
  padding: var(--wf-4) 0;
}

.wf-main{
  min-height:60vh;
  padding: var(--wf-7) 0 var(--wf-8);
}

.wf-footer{
  background: var(--wf-surface-2);
  padding: var(--wf-7) 0;
  border-top:1px solid var(--wf-border);
}
.wf-footer__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--wf-5);
  align-items:start;
}
.wf-footer__list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 6px;
}
.wf-footer__list a{ color: var(--wf-text-2); text-decoration:none; }
.wf-footer__list a:hover{ text-decoration:underline; color: var(--wf-link-hover); }

/* GPT slots container stays off-canvas but present in DOM */
.wf-gpt-slots{
  position: relative;
  display: grid;
  gap: var(--wf-4);
  padding: var(--wf-4) 0;
}

/* ========== TYPO ========== */
.wf-h1{ font-size: clamp(28px, 3vw, 40px); line-height: 1.15; margin:0 0 var(--wf-4); }
.wf-h2{ font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; margin:0 0 var(--wf-3); }
.wf-h3{ font-size: 20px; line-height: 1.25; margin:0 0 var(--wf-2); }
.wf-lead{ font-size: var(--wf-text-2); color: var(--wf-text-2); }
.wf-muted{ color: var(--wf-muted); }

/* ========== UTILITIES ========== */
.wf-hidden{ display:none !important; }
.wf-center{ display:flex; align-items:center; justify-content:center; }
.wf-pad{ padding: var(--wf-6); }
.wf-pad-sm{ padding: var(--wf-4); }
.wf-radius{ border-radius: var(--wf-radius-2); }
.wf-border{ border: 1px solid var(--wf-border); }
.wf-shadow{ box-shadow: var(--wf-shadow); }

@media (max-width: 900px){
  :root{ --wf-gutter: 14px; }
  .wf-nav__list{ display:none; }
  .wf-nav__toggle{ display:inline-flex; }
  .wf-nav__drawer[hidden]{ display:none; }
  .wf-nav__drawer{ display:block; }
}