/* ─────────────────────────────────────────
   CardLead — shared.css
   CSS compartilhado entre landing page (index.html) e blog (blog.html)
   ───────────────────────────────────────── */

/* ── Fontes ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;0,9..40,900;1,9..40,400&family=DM+Serif+Display&display=swap');

/* ── Variáveis (modo escuro — padrão) ── */
:root {
  --gold:        #D4AF37;
  --gold-light:  #e8cf6a;
  --gold-dim:    rgba(212,175,55,0.12);
  --gold-subtle: rgba(212,175,55,0.08);
  --bg:          #0c0c10;
  --bg2:         #111116;
  --bg3:         #18181e;
  --text:        #eeeef5;
  --muted:       rgba(238,238,245,0.45);
  --border:      rgba(255,255,255,0.06);
  --border-gold: rgba(212,175,55,0.22);
}

/* ── Variáveis (modo claro) ── */
body.light,
:root[data-theme="light"] {
  --gold:        #b8941f;
  --gold-light:  #d4ae3a;
  --gold-dim:    rgba(184,148,31,0.1);
  --gold-subtle: rgba(184,148,31,0.08);
  --bg:          #eeeef5;
  --bg2:         #ede8df;
  --bg3:         #e6e0d6;
  --text:        #0e0e0e;
  --muted:       rgba(14,14,14,0.5);
  --border:      rgba(14,14,14,0.08);
  --border-gold: rgba(184,148,31,0.3);
}

/* ── Modo claro — footer ── */
body.light footer,
:root[data-theme="light"] footer {
  background: #e6e0d6 !important;
}

/* ── Logo ── */
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark-svg {
  width: 40px; height: 45px;
  background: transparent;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 0;
}
.logo-text {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 20px; font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.logo-text em { color: var(--gold); font-style: normal; }

/* ── Footer ── */
footer {
  background: #040404;
  border-top: 1px solid var(--border);
  padding: 60px 56px 36px;
}
.footer-inner { max-width: 960px; margin: 0 auto; padding: 0 32px; }
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 40px; margin-bottom: 52px; align-items: start;
}
.foot-brand p { font-size: 14px; color: var(--muted); line-height: 1.72; margin-top: 16px; max-width: 260px; }
.foot-col h4 { font-size: 11px; font-weight: 700; color: var(--text); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 18px; }
.foot-link { display: block; font-size: 14px; color: var(--muted); text-decoration: none; margin-bottom: 11px; transition: color 0.15s; }
.foot-link:hover { color: var(--gold); }
.foot-bot { border-top: 1px solid var(--border); padding-top: 28px; display: flex; align-items: center; justify-content: center; }
.foot-copy { font-size: 13px; color: var(--muted); }
.foot-socials { display: flex; gap: 12px; }
.foot-soc {
  width: 42px; height: 42px;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  color: var(--gold); text-decoration: none;
}
.foot-soc:hover { border-color: var(--gold); background: var(--gold-subtle); }
.foot-soc svg { width: 20px; height: 20px; stroke-width: 2; }

/* ── Footer responsive ── */
@media (max-width: 900px) {
  footer { padding: 48px 24px 28px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .foot-bot { flex-direction: column; gap: 16px; align-items: flex-start; }
}
@media (max-width: 600px) {
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .foot-brand p { max-width: 100%; }
}

/* ── Toggle de tema ── */
.theme-toggle, .toggle-btn {
  width: 36px; height: 36px;
  border-radius: 9px;
  border: 1px solid var(--border-gold);
  background: var(--gold-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.theme-toggle:hover, .toggle-btn:hover { background: var(--gold-dim); border-color: var(--gold); }
.theme-toggle svg, .toggle-btn svg { width: 16px; height: 16px; color: var(--gold); transition: transform 0.3s; }

/* Modo escuro → mostra sol (ação: ir para claro) */
.icon-moon { display: none; }
.icon-sun  { display: block; }

/* Modo claro → mostra lua (ação: ir para escuro) */
body.light .icon-moon,
:root[data-theme="light"] .icon-moon { display: block; }
body.light .icon-sun,
:root[data-theme="light"] .icon-sun  { display: none; }

body.light .theme-toggle svg,
body.light .toggle-btn svg,
:root[data-theme="light"] .theme-toggle svg,
:root[data-theme="light"] .toggle-btn svg { transform: rotate(0deg); }