/* Fontes alojadas no próprio site (Fontshare, licença ITF Free Font). Só existem estes pesos:
   pedir outro (ex.: 800) faz o browser engrossar a letra artificialmente. */
/* O espaço da Clash Display é muito estreito (0,14em; o normal é ~0,25em) e as palavras colam-se
   ("Querosairdasdívidas"). Por isso o carácter de espaço (U+0020 e U+00A0) vem da Satoshi,
   e tudo o resto da Clash. */
@font-face { font-family: 'Clash Display'; src: url('/fonts/clash-display-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-001F, U+0021-009F, U+00A1-10FFFF; }
@font-face { font-family: 'Clash Display'; src: url('/fonts/clash-display-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-001F, U+0021-009F, U+00A1-10FFFF; }
@font-face { font-family: 'Clash Display'; src: url('/fonts/satoshi-500.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0020, U+00A0; }
@font-face { font-family: 'Clash Display'; src: url('/fonts/satoshi-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0020, U+00A0; }
@font-face { font-family: 'Satoshi'; src: url('/fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/fonts/satoshi-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Brand */
  --navy:        #0B1F3A;
  --navy-dark:   #1A3A5C;   /* gradient endpoint — substitui todos os #1A3A5C hardcoded */

  /* Blue */
  --blue:        #1A56A0;
  --blue-mid:    #3B82F6;
  --blue-light:  #EFF6FF;
  --blue-border: #BFDBFE;

  /* Green */
  --green:       #00C97B;
  --green-mid:   #00B87A;
  --green-light: #E6FBF3;
  --green-border:#A7F3D0;

  /* Red */
  --red:         #DC2626;
  --red-light:   #FEF2F2;
  --red-border:  #FECACA;

  /* Amber */
  --amber:       #D97706;
  --amber-light: #FFFBEB;
  --amber-border:#FDE68A;

  /* Text */
  --text:        #0B1F3A;
  --text-muted:  #64748B;
  --text-light:  #94A3B8;

  /* Cores de texto com significado — usar estas em "color:", não as de marca.
     No claro são iguais às de marca; no escuro passam a versões claras legíveis. */
  --text-strong:      #0B1F3A;
  --red-text:         #DC2626;
  --blue-text:        #3B82F6;
  --blue-text-strong: #1E40AF;
  --green-text:       #00C97B;

  /* UI */
  --border:      #E2E8F0;
  --bg:          #F8FAFC;

  /* Elevation */
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:      0 4px 16px rgba(11,31,58,0.08);
  --shadow-lg:      0 10px 40px rgba(11,31,58,0.12);
  --shadow-overlay: 0 20px 60px rgba(0,0,0,0.28);
  --shadow-btn:     0 2px 8px rgba(11,31,58,0.18);
  --shadow-btn-h:   0 4px 14px rgba(11,31,58,0.28);

  /* Radius — sistema de 3 níveis */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius:    16px;  /* compatibilidade com código existente */

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(59,130,246,0.12);

  /* Typography */
  --font-title:  'Clash Display', sans-serif;
  --font-body:   'Satoshi', sans-serif;

  /* Type scale */
  --text-3xs:  11px;
  --text-2xs:  11px;
  --text-xs:   13px;
  --text-base: 15px;
  --text-md:   18px;
  --text-lg:   25px;
  --text-xl:   30px;
  --text-2xl:  44px;
}

/* ==================== DARK MODE BASE ==================== */
[data-theme="dark"] {
  --bg:          #0F172A;
  --border:      #334155;
  --text:        #F1F5F9;
  --text-muted:  #94A3B8;
  --text-light:  #8A9BB1;   /* era #475569: 1,9:1 nos cartões, ilegível */
  --text-strong:      #F1F5F9;
  --red-text:         #F87171;
  --blue-text:        #93C5FD;
  --blue-text-strong: #93C5FD;
  --green-text:       #34D399;
  --blue-light:  #1E3A5F;
  --blue-border: #1E3A5F;
  --green-light: #064E3B;
  --green-border:#059669;
  --red-light:   #450A0A;
  --red-border:  #7F1D1D;
  --amber-light: #451A03;
  --amber-border:#78350F;
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.35);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.40);
  --shadow-lg:   0 10px 40px rgba(0,0,0,0.50);
}

/* ==================== DARK MODE — DASHBOARD ==================== */
[data-theme="dark"] .topbar {
  background: rgba(15,23,42,0.92) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
[data-theme="dark"] .card,
[data-theme="dark"] .metric,
[data-theme="dark"] .previsao-item { background: #1E293B !important; }
[data-theme="dark"] .add-expense-bar { background: #1E293B !important; }
[data-theme="dark"] .modal { background: #1E293B !important; }
[data-theme="dark"] .modal-title { color: var(--text); }
[data-theme="dark"] .chat-panel { background: #1E293B !important; }
[data-theme="dark"] .toast { background: #1E293B !important; }
[data-theme="dark"] .expense-input,
[data-theme="dark"] .expense-select { background: #0F172A; color: var(--text); }
[data-theme="dark"] .chat-input { background: #0F172A; color: var(--text); }
[data-theme="dark"] .modal-field input,
[data-theme="dark"] .modal-field select { background: #0F172A; color: var(--text); border-color: var(--border); }
[data-theme="dark"] .modal-field input:focus,
[data-theme="dark"] .modal-field select:focus { border-color: var(--blue-mid); }
[data-theme="dark"] .sim-card { background: #0F172A; }
[data-theme="dark"] .modal-btn-cancel { background: #0F172A; color: var(--text-muted); }
[data-theme="dark"] .advice-card {
  background: linear-gradient(135deg, #1E3A5F 0%, #064E3B 100%);
  border-color: #1E3A5F;
}
[data-theme="dark"] .advice-text { color: var(--text); }
[data-theme="dark"] .pluggy-card {
  background: linear-gradient(135deg, #064E3B 0%, #1E3A5F 100%);
  border-color: #064E3B;
}
[data-theme="dark"] .pluggy-title { color: var(--text); }
/* Texto secundário sobre os fundos verdes escuros: o cinzento normal fica abaixo de 4,5:1 */
[data-theme="dark"] .pluggy-sub,
[data-theme="dark"] .pluggy-feature,
[data-theme="dark"] .btn-manual,
[data-theme="dark"] .conquista-card.desbloqueada .conquista-desc { color: #CBD5E1; }
[data-theme="dark"] .msg-bot .msg-bubble { background: #0F172A; }
[data-theme="dark"] .suggestion-chip { background: #0F172A; }
[data-theme="dark"] .step-num { background: #1E3A5F; }
[data-theme="dark"] .step-num.done { background: #064E3B; }
[data-theme="dark"] .hamburger span { background: var(--text); }
[data-theme="dark"] #themeToggleBtn { color: rgba(255,255,255,0.7) !important; }
[data-theme="dark"] .conquista-card.desbloqueada { background: #064E3B; border-color: #059669; }
[data-theme="dark"] .conquista-card.bloqueada { background: #1E293B; border-color: var(--border); }
[data-theme="dark"] .diagnostico-card { background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%); }
[data-theme="dark"] .sim-msg { background: var(--green-light); border-color: var(--green-border); color: var(--text); }
[data-theme="dark"] .sim-comparison { background: var(--blue-light); border-color: var(--blue-border); color: var(--text); }
[data-theme="dark"] .sim-warning { background: var(--red-light); border-color: var(--red-border); color: var(--text); }

/* ==================== DARK MODE — LOGIN ==================== */
[data-theme="dark"] .right { background: var(--bg); }
[data-theme="dark"] .auth-card { background: #1E293B; border-color: var(--border); }
[data-theme="dark"] .tabs { background: #0F172A; }
[data-theme="dark"] .tab.active { background: #1E293B; color: var(--text); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .tab { color: var(--text-muted); }
[data-theme="dark"] .form-title { color: var(--text); }
[data-theme="dark"] .field input {
  background: #0F172A; color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .field input:focus { border-color: var(--blue-mid); box-shadow: var(--focus-ring); }
[data-theme="dark"] .modal-box { background: #1E293B; }
[data-theme="dark"] .modal-title { color: var(--text); }
[data-theme="dark"] .alert-error { background: var(--red-light); border-color: var(--red-border); }
[data-theme="dark"] .alert-success { background: var(--green-light); border-color: var(--green-border); }

/* ==================== DARK MODE — ONBOARDING ==================== */
[data-theme="dark"] .card { background: #1E293B !important; border-color: var(--border); }
[data-theme="dark"] .card-title { color: var(--text); }
[data-theme="dark"] .field input,
[data-theme="dark"] .field select {
  background: #0F172A; color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field select:focus { border-color: var(--blue-mid); box-shadow: var(--focus-ring); }
[data-theme="dark"] .radio-row { background: #1E293B; border-color: var(--border); }
[data-theme="dark"] .radio-row:hover { background: #0F172A; border-color: var(--blue-mid); }
[data-theme="dark"] .radio-row.selected { background: #0F172A; border-color: var(--navy-dark); }
[data-theme="dark"] .radio-icon-box { background: var(--blue-light); }
[data-theme="dark"] .member-block { background: #0F172A; border-color: var(--border); }
[data-theme="dark"] .debt-form { background: #0F172A; border-color: var(--border); }
[data-theme="dark"] .debt-entry { background: #0F172A; border-color: var(--border); }
[data-theme="dark"] .renda-total { background: var(--blue-light); border-color: var(--blue-border); }
[data-theme="dark"] .sobra-wrap { background: #0F172A; border-color: var(--border); }
[data-theme="dark"] .plan-hero { background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%); }
[data-theme="dark"] .ai-analysis { background: var(--blue-light); border-color: var(--blue-border); }
[data-theme="dark"] .ai-text { color: var(--text); }
[data-theme="dark"] .btn-back { background: #0F172A; color: var(--text-muted); border-color: var(--border); }
[data-theme="dark"] .divider { color: var(--text-muted); border-color: var(--border); }
[data-theme="dark"] .alert-box { background: var(--amber-light); border-color: var(--amber-border); }

/* ==================== DARK MODE — INDEX / LANDING ==================== */
[data-theme="dark"] nav {
  background: rgba(15,23,42,0.96);
  border-color: var(--border);
}
[data-theme="dark"] .nav-logo-name { color: var(--text); }
[data-theme="dark"] .nav-link { color: var(--text-muted); }
[data-theme="dark"] .nav-link:hover { color: var(--text); }
[data-theme="dark"] .hero { background: linear-gradient(160deg, #0F172A 0%, #1E293B 60%); }
[data-theme="dark"] .hero h1 { color: var(--text); }
[data-theme="dark"] .hero-input {
  background: #1E293B; color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .hero-card { background: #1E293B; border-color: var(--border); }
[data-theme="dark"] .section { background: var(--bg); }
[data-theme="dark"] .feature-card { background: #1E293B; border-color: var(--border); }
[data-theme="dark"] .feature-card h3 { color: var(--text); }
[data-theme="dark"] .plan { background: #1E293B; border-color: var(--border); }
[data-theme="dark"] .plan-price { color: var(--text); }
[data-theme="dark"] .faq-question { color: var(--text); }
[data-theme="dark"] .faq-item { border-color: var(--border); }
[data-theme="dark"] .legal-bar { background: #1E293B; border-color: var(--border); }
[data-theme="dark"] .nav-mobile-menu {
  background: #1E293B;
  border-color: var(--border);
}
[data-theme="dark"] .nav-mobile-link { color: var(--text); border-color: var(--border); }
[data-theme="dark"] .hcard-body { background: #1E293B; }
[data-theme="dark"] .hcard-insight { background: #0F172A; }
[data-theme="dark"] .hcard-debt-name { color: var(--text); }

/* ==================== ANIMAÇÕES PARTILHADAS ==================== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ==================== RESET ==================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
h1, h2, h3, h4, h5 { font-family: var(--font-title); line-height: 1.2; }
b, strong { font-family: var(--font-title); }
button, input, select, textarea { font-family: var(--font-body); }

/* ==================== FOCUS UNIVERSAL ==================== */
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: none;
  border-color: var(--blue-mid);
  box-shadow: var(--focus-ring);
}