/* ═══════ Blog skin — unificação identidade Partners + toggle claro/escuro (2026-06-08) ═══════
   Sobrepõe os tokens da paleta antiga (Clube Claude) nos 11 arquivos do blog.
   Linkado DEPOIS do <style> inline de cada página, então vence no cascade.
   Reaproveita o layout existente; só recolore + habilita data-theme. */

:root {
  /* fontes unificadas */
  --head: "Cormorant Garamond", Georgia, serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  /* Refino 2026-07: a skin não achata mais os cantos. Curva editorial
     consistente (cards 20, blocos 26, detalhes 10-14). */
  --radius-xl: 26px; --radius-lg: 20px; --radius-md: 14px; --radius-sm: 10px;
  /* easing único do site */
  --ease: cubic-bezier(.2,.7,.2,1);

  /* ── CLARO (default) ── */
  --bg: #faf8f3; --bg-soft: #f3efe6; --surface: #ffffff; --surface-strong: #ffffff;
  --text: #1a1a1a; --text-soft: #3a3a3a; --text-faint: #6b6b6b;
  --line: #d9d3c5; --line-strong: #c9c2b2;
  --brand: #1f5a52; --brand-deep: #7e5f31; --brand-glow: rgba(44,114,105,.10);
  --gold: #a07a3f; --green: #7e5f31; --green-soft: rgba(160,122,63,.08);
  --violet: #246b62; --violet-glow: rgba(44,114,105,.07);
  --charcoal: #0a0a0a;
  --shadow: 0 2px 4px rgba(10,10,10,.05), 0 16px 48px rgba(10,10,10,.10);
  --shadow-soft: 0 1px 2px rgba(10,10,10,.05), 0 4px 16px rgba(10,10,10,.06);
}

[data-theme="dark"] {
  --bg: #0a0a0a; --bg-soft: #141414; --surface: #161616; --surface-strong: #1c1c1c;
  --text: #faf8f3; --text-soft: #c8c4ba; --text-faint: #8d877b;
  --line: rgba(217,200,163,.16); --line-strong: rgba(217,200,163,.28);
  --brand: #6cb6ad; --brand-deep: #d9c8a3; --brand-glow: rgba(44,114,105,.16);
  --gold: #d9c8a3; --green: #d9c8a3; --green-soft: rgba(160,122,63,.12);
  --violet: #6cb6ad; --violet-glow: rgba(44,114,105,.12);
  --charcoal: #141414;
  --shadow: 0 4px 20px rgba(0,0,0,.55); --shadow-soft: 0 2px 10px rgba(0,0,0,.4);
}

/* Fundo do body por tema — os posts hardcodam um gradiente claro inline que
   não vira no escuro (texto claro sobre fundo claro). Seletor mais específico
   que o `body {}` inline + carregado depois = vence sem !important. */
[data-theme="dark"] body { background: var(--bg); }

/* Transição suave ao trocar de tema (o toggle do blog) */
body, .nav, .nav.glass, .post-card, .card, .ds-card, .post-cta, .theme-toggle, code, blockquote {
  transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  body, .nav, .nav.glass, .post-card, .card, .ds-card, .post-cta, .theme-toggle, code, blockquote { transition: none; }
}

/* Display em Cormorant: peso/kerning premium */
.post-header h1, .post-body h2, .post-body h3, .post-card h2, .featured h2, .title { font-weight: 600; letter-spacing: -.015em; }

/* Nav liquid glass por tema (sem color-mix pra compat):
   leitosa quente no claro, fumê com borda dourada sutil no escuro.
   Camadas: reflexo interno no topo + highlight na borda superior +
   sombra macia. Prefixo -webkit- já vem do inline/DS das páginas. */
.nav, .nav.glass {
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 55%),
    rgba(250,248,243,.72);
  border: 1px solid rgba(160,122,63,.20);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(160,122,63,.06),
    0 16px 38px -18px rgba(64,52,28,.22),
    0 2px 8px -3px rgba(64,52,28,.12);
}
[data-theme="dark"] .nav, [data-theme="dark"] .nav.glass {
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,0) 50%),
    rgba(14,14,14,.66);
  border-color: rgba(217,200,163,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(217,200,163,.05),
    0 18px 44px -18px rgba(0,0,0,.6),
    0 2px 10px -3px rgba(0,0,0,.4);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav, .nav.glass { background: rgba(250,248,243,.97); }
  [data-theme="dark"] .nav, [data-theme="dark"] .nav.glass { background: rgba(12,12,12,.96); }
}
@media (max-width: 768px) {
  .nav, .nav.glass {
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
  }
}
[data-theme="dark"] .nav-wrap { background: linear-gradient(180deg, #0a0a0a 0%, rgba(10,10,10,.9) 80%, transparent 100%); }

/* Links da nav: fio que cresce por baixo no hover */
.nav .nav-links a {
  position: relative; padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat;
  transition: background-size .22s var(--ease), color .18s var(--ease);
}
.nav .nav-links a:hover { background-size: 100% 1px; text-decoration: none; }

/* Cards do blog: curva + lift discreto no hover */
.post-card, .card, .ds-card {
  transition: transform .2s var(--ease), box-shadow .3s var(--ease), border-color .2s var(--ease), background-color .35s var(--ease);
}
.post-card:hover, .card:hover, .ds-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

/* Seleção na cor da marca (dourado quente) */
::selection { background: rgba(160,122,63,.30); }
[data-theme="dark"] ::selection { background: rgba(217,200,163,.30); }

/* Scrollbar no tema */
html { scrollbar-width: thin; scrollbar-color: rgba(160,122,63,.45) transparent; }
[data-theme="dark"] { scrollbar-color: rgba(217,200,163,.35) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(160,122,63,.35); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(160,122,63,.55); border: 2px solid transparent; background-clip: content-box; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(217,200,163,.28); border: 2px solid transparent; background-clip: content-box; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(217,200,163,.45); border: 2px solid transparent; background-clip: content-box; }

/* CTA do post: cartão carbon premium nos dois temas (CCA button mantém o dourado inline) */
.post-cta { background: #0a0a0a; color: #faf8f3; border: 1px solid var(--brand-deep); border-radius: var(--radius-lg); }
.post-cta h2, .post-cta h3 { color: #faf8f3; }
.post-cta p { color: #c8c4ba; }

/* Code blocks legíveis no escuro */
[data-theme="dark"] .post-body code, [data-theme="dark"] code { background: rgba(217,200,163,.1); color: #e8e3d8; }

/* Toggle de tema */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; flex: 0 0 auto; border-radius: 999px; transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.theme-toggle:hover { border-color: var(--brand); color: var(--brand); background: rgba(160,122,63,.06); }
.theme-toggle svg { width: 18px; height: 18px; }
.nav .nav-actions { display: flex; align-items: center; gap: 12px; }