/* ===============================================================
   Nextcodes — paleta inspirada na interface do Claude
   ---------------------------------------------------------------
   Carrega DEPOIS de framer.css: mantem a geometria (pilulas,
   cantos, nav flutuante) e troca a cor.

   Base: papel creme quente #FAF9F5, tinta quase preta e o laranja
   caracteristico #D97757.

   Sobre o laranja: no creme ele rende so 2.96:1, entao aparece em
   PREENCHIMENTOS (botoes, selos, barras), nunca em texto pequeno.
   Para texto usamos #B54F2E, mesma familia, com 4.84:1.
   =============================================================== */

:root {
  /* superficies */
  --bg:          #FAF9F5;   /* papel creme                        */
  --bg-2:        #F0EEE6;   /* paineis e blocos destacados        */
  --bg-3:        #E8E5DA;
  --bg-deep:     #262624;   /* secoes escuras (o escuro do Claude) */

  /* tinta */
  --ink:         #141413;   /* 17.5:1 titulos                     */
  --ink-2:       #1F1E1D;   /* 15.8:1                             */
  --ink-3:       #3D3D3A;   /* 10.3:1 texto corrido               */
  --ink-muted:   #5C5A54;   /*  6.6:1                             */
  --ink-faint:   #6F6D66;   /*  4.9:1 rotulos pequenos            */
  --ink-ghost:   #A8A59C;   /*  2.3:1 apenas decorativo           */

  /* linhas */
  --line:        #E5E2DA;
  --line-soft:   #EFEDE5;
  --line-strong: #D6D2C6;

  /* laranja da marca */
  --accent:      #B54F2E;   /* 4.84:1 — texto e links             */
  --accent-fill: #D97757;   /* preenchimentos                     */
  --accent-deep: #C25A38;
  --accent-wash: #F5E7E0;
}

/* --------------------------------------------------------------
   Superficies
   -------------------------------------------------------------- */

html, body                            { background-color: var(--bg); }
body.bg-white, body .bg-white         { background-color: var(--bg); }
body .bg-zinc-50                      { background-color: var(--bg-2); }
body .bg-zinc-100                     { background-color: var(--bg-3); }
body .bg-white\/90                    { background-color: rgba(250,249,245,.80); }
body .bg-zinc-900, body .bg-black     { background-color: var(--bg-deep); }
body .bg-zinc-800                     { background-color: #30302E; }
body .bg-zinc-800\/40                 { background-color: rgba(48,48,46,.55); }

body .md\:divide-x > [data-animate]:has(> ul),
body .plan-card {
  background: #FFFFFF;
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(20,20,19,.04), 0 12px 28px -18px rgba(20,20,19,.16);
}
body .md\:divide-x > [data-animate]:has(> ul):hover {
  border-color: var(--line-strong);
  box-shadow: 0 8px 20px -10px rgba(20,20,19,.14), 0 30px 60px -34px rgba(20,20,19,.30);
}
body .md\:divide-x > .bg-zinc-50[data-animate] { background: var(--bg-2); }

/* --------------------------------------------------------------
   Tinta
   -------------------------------------------------------------- */

body.text-zinc-900, body .text-zinc-900 { color: var(--ink); }
body .text-zinc-700                   { color: var(--ink-2); }
body .text-zinc-600                   { color: var(--ink-3); }
body .text-zinc-500                   { color: var(--ink-muted); }
body .text-zinc-400                   { color: var(--ink-faint); }
body .text-zinc-300                   { color: var(--ink-ghost); }

body .bg-zinc-900 .text-zinc-400,
body .bg-black   .text-zinc-400       { color: #B7B4AC; }
body .bg-zinc-900 .text-zinc-500,
body .bg-black   .text-zinc-500       { color: #96938B; }
body .bg-zinc-900 .text-zinc-600      { color: #7C7A73; }

/* --------------------------------------------------------------
   Linhas
   -------------------------------------------------------------- */

body .border-zinc-200                 { border-color: var(--line); }
body .border-zinc-100                 { border-color: var(--line-soft); }
body .border-zinc-300                 { border-color: var(--line-strong); }
body .divide-zinc-200 > * + *         { border-color: var(--line); }
body .divide-zinc-100 > * + *         { border-color: var(--line-soft); }
body .border-zinc-700,
body .border-zinc-700\/70             { border-color: rgba(245,244,239,.16); }

/* --------------------------------------------------------------
   Botoes — tinta solida, laranja no hover
   -------------------------------------------------------------- */

body a[class*="bg-zinc-900"],
body button[class*="bg-zinc-900"] {
  background-color: var(--ink-2);
  color: #FAF9F5;
  box-shadow: 0 1px 2px rgba(20,20,19,.14);
}
body a[class*="bg-zinc-900"]:hover,
body button[class*="bg-zinc-900"]:hover {
  background-color: var(--accent-fill);
  color: #1F1E1D;                       /* 5.3:1 sobre o laranja */
  box-shadow: 0 10px 24px -12px rgba(217,119,87,.65);
}

body a[class*="border-zinc-300"]:hover,
body a[class*="border-zinc-200"]:hover {
  background-color: var(--bg-2);
  border-color: var(--line-strong);
  color: var(--ink);
}

/* --------------------------------------------------------------
   Acento
   -------------------------------------------------------------- */

::selection { background: var(--accent-fill); color: #1F1E1D; }
:focus-visible { outline-color: var(--accent) !important; }
.soul-progress { background: var(--accent-fill); }

body li > span.text-zinc-300              { color: var(--accent-fill); }
body .divide-zinc-100 span.text-zinc-900  { color: var(--accent); }
body a.hover\:text-zinc-900:hover         { color: var(--accent); }
body .bg-zinc-900 a:hover                 { color: var(--accent-fill); }

body .border-zinc-300.rounded-sm {
  border-color: transparent;
  color: var(--accent);
  background-color: var(--accent-wash);
}

body #siteHeader nav a:not([class*="bg-zinc-900"])::after,
body footer a:not([class*="bg-"])::after  { background: var(--accent-fill); }

/* nav flutuante */
body #siteHeader > nav {
  background: rgba(250,249,245,.78);
  border-color: var(--line);
}
body #siteHeader.is-stuck > nav { background: rgba(250,249,245,.92); }
body #mobileMenu { background: var(--bg); border-color: var(--line); }

/* campos */
body .field {
  --field-bg:  #FFFFFF;
  --field-ink: #141413;
  color: var(--ink);
  background-color: #FFFFFF;
  border-color: var(--line-strong);
  border-radius: 12px;
}
body .field:hover  { border-color: var(--ink-ghost); }
body .field:focus {
  border-color: var(--accent-fill);
  box-shadow: 0 0 0 3px rgba(217,119,87,.20);
}
body .field::placeholder { color: var(--ink-ghost); }
body select.field option { background: #FFFFFF; color: var(--ink); }
body .tab-active         { color: var(--ink); border-color: var(--accent-fill); }

/* detalhes */
body::after { display: block; opacity: .018; }

.soul-spotlight::before {
  background: radial-gradient(
    460px circle at var(--mx, 50%) var(--my, 50%),
    rgba(217,119,87,.14),
    transparent 65%
  );
}

::-webkit-scrollbar-thumb { background: var(--line-strong); border-color: var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-ghost); }