/* =========================================================
   TEMA CLARO — ativado pelo botão de tema (js/tema.js)
   Paleta "manhã": pedra clara, tinta verde-escura, verde-petróleo como destaque
   e âmbar só nos detalhes. É a única fonte das cores claras do site.
   Hero: de dia, com a cidade clara (js/hero-cena.js) e o texto escuro.
   ========================================================= */

body.light-theme {
  --cream: #15201e;              /* texto principal */
  --dark: #f3f1ea;               /* fundo da página */
  --card-bg: #fffdf8;
  --mid: #fffdf8;
  --accent: #0a6b66;             /* verde-petróleo: 5,6:1 no fundo, texto branco por cima */
  --accent-glow: rgba(10, 107, 102, .16);
  --ambar: #a35406;              /* segundo tom, para detalhes */
  --gray: #55625e;               /* texto secundário: 5,4:1 no fundo */
  --border: rgba(21, 32, 30, .1);

  --nav-bg: rgba(250, 248, 242, .72);
  --nav-scroll: rgba(250, 248, 242, .86);
  --spotlight: rgba(10, 107, 102, .06);
  --badge-bg: rgba(255, 253, 248, .9);
  --services-bg: transparent;

  --glass-tint: linear-gradient(145deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .5) 46%, rgba(255, 255, 255, .64));
  --glass-line: rgba(255, 255, 255, .85);
  --glass-shine: inset 0 1px 0 rgba(255, 255, 255, .9);
  --glass-shadow: 0 16px 40px rgba(30, 50, 45, .1);
  --glass-solid: rgba(255, 253, 248, .92);
  --blob-a: rgba(18, 150, 140, .17);
  --blob-b: rgba(235, 165, 70, .2);
}

/* ---------- navbar ---------- */
body.light-theme nav { box-shadow: var(--glass-shine), 0 10px 30px rgba(30, 50, 45, .08); }
body.light-theme .nav-toggle { color: var(--cream); }
body.light-theme .lang-btn,
body.light-theme .theme-btn { background: rgba(21, 32, 30, .05); }
body.light-theme .lang-btn:hover,
body.light-theme .theme-btn:hover { background: var(--accent); color: #fff; }
body.light-theme .nav-ajustes-menu { box-shadow: 0 16px 44px rgba(30, 50, 45, .16); border-color: var(--border); }

/* ---------- textos sobre o destaque ficam brancos ---------- */
body.light-theme .nav-cta,
body.light-theme .btn-primary { color: #fff; }
body.light-theme .btn-ghost:hover { background: rgba(10, 107, 102, .06); }
body.light-theme .barra-leitura { background: linear-gradient(90deg, var(--accent), var(--ambar)); }

/* ---------- faixa animada ---------- */
body.light-theme .marquee-track.alt .marquee-item { -webkit-text-stroke-color: #7f8c87; }

/* ---------- ilustrações: traço em petróleo, detalhe em âmbar ---------- */
body.light-theme .ill .ft { fill: #c9781f; }

/* ---------- formações ---------- */
body.light-theme .project-thumb { background: #e9e6db; }
body.light-theme .project-thumb .thumb-bg { opacity: 1; }
body.light-theme .p1 .thumb-bg { background: linear-gradient(135deg, #dcebe7, #c5dcd6); }
body.light-theme .p2 .thumb-bg { background: linear-gradient(135deg, #e4e9dc, #d2dcc5); }
body.light-theme .p3 .thumb-bg { background: linear-gradient(135deg, #f3e8d4, #e8d5b3); }
body.light-theme .p4 .thumb-bg { background: linear-gradient(135deg, #dde9ec, #c6d9de); }
body.light-theme .project-thumb .thumb-label { color: rgba(21, 32, 30, .3); }
body.light-theme .project-thumb .ill-thumb { color: var(--accent); }
body.light-theme .work-grid.is-stack .project-card { box-shadow: var(--glass-shine), 0 -12px 32px rgba(30, 50, 45, .1); }

/* ---------- laboratório ---------- */
body.light-theme .tool-status.live { color: #11793a; }

/* ---------- contato ---------- */
body.light-theme .contact-container { box-shadow: none; }
body.light-theme .glow-blob { opacity: .18; }
body.light-theme .brand-email:hover .card-icon { color: #fff; }

/* ---------- cursor ---------- */
body.light-theme .cursor.expand::before { background: rgba(10, 107, 102, .12); }

/* ---------- tela de carregamento ---------- */
body.light-theme .loader { color: #15201e; }
body.light-theme .loader-panel { background: #f3f1ea; }
body.light-theme .loader-top { background: radial-gradient(ellipse at 50% 100%, #fffdf8 0%, #f3f1ea 65%); }
body.light-theme .loader-bottom { background: radial-gradient(ellipse at 50% 0%, #fffdf8 0%, #f3f1ea 65%); }
body.light-theme .loader-bottom::before { background: linear-gradient(90deg, transparent, rgba(10, 107, 102, .45), transparent); }
body.light-theme .loader-mark .stroke { stroke: #15201e; }
body.light-theme .loader-mark .dot { fill: #0a6b66; }
body.light-theme .loader-line { background: rgba(21, 32, 30, .1); }
body.light-theme .loader-line i { background: linear-gradient(90deg, #0a6b66, #c9781f); box-shadow: none; }
body.light-theme .loader-tag { color: rgba(21, 32, 30, .55); }

/* =========================================================
   HERO DE DIA — a cena vem de js/hero-cena.js; aqui fica o que está por cima dela.
   O menu sobre a hero usa o visual claro normal (js/navbar.js não marca on-hero).
   ========================================================= */
body.light-theme #hero { --hero-ink: #13201e; --hero-bg: #e6ebe6; }
body.light-theme .city-scene.no-webgl { background: radial-gradient(ellipse at 60% 75%, rgba(18, 150, 140, .2), transparent 55%), radial-gradient(ellipse at 20% 30%, rgba(235, 165, 70, .2), transparent 50%), var(--hero-bg); }
/* névoa clara em cima e embaixo: o texto escuro fica sobre céu limpo */
body.light-theme .city-shade { background: linear-gradient(to bottom, rgba(238, 241, 236, .8), rgba(238, 241, 236, .34) 34%, rgba(238, 241, 236, 0) 62%), linear-gradient(to top, rgba(238, 241, 236, .6), rgba(238, 241, 236, 0) 20%); }

body.light-theme .city-tag { color: var(--accent); }
body.light-theme .city-copy h1 { color: var(--hero-ink); text-shadow: 0 0 34px rgba(245, 247, 242, .7); }
body.light-theme .city-copy p { color: rgba(19, 32, 30, .86); text-shadow: 0 0 3px rgba(245, 247, 242, .95), 0 0 16px rgba(245, 247, 242, .95); }
body.light-theme .city-copy p strong { color: var(--hero-ink); }

body.light-theme .vhero-btn { color: #fbfaf5; background: #13201e; }
body.light-theme .vhero-btn:hover { background: #0a6b66; }
body.light-theme .vhero-btn.ghost { color: #13201e; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(19, 32, 30, .1); }
body.light-theme .vhero-btn.ghost:hover { background: rgba(255, 255, 255, .86); }

body.light-theme .city-stats strong { text-shadow: 0 0 14px rgba(245, 247, 242, .95); }
body.light-theme .city-stats span { color: rgba(19, 32, 30, .78); text-shadow: 0 0 3px rgba(245, 247, 242, .95), 0 0 12px rgba(245, 247, 242, .95); }

body.light-theme .city-cue:hover, body.light-theme .city-cue:focus-visible { color: var(--accent); }
body.light-theme .city-cue::after { background: rgba(19, 32, 30, .22); }
body.light-theme .city-cue i { background: var(--accent); }

body.light-theme .city-steps,
body.light-theme .city-steps.is-liquido {
  background: linear-gradient(145deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, .74));
  border-color: rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 24px 60px rgba(30, 50, 45, .16);
}
html.perf-low body.light-theme .city-steps { background: rgba(255, 253, 248, .94) !important; }
body.light-theme .cs-num { color: rgba(19, 32, 30, .78); background: rgba(255, 255, 255, .6); border-color: rgba(19, 32, 30, .2); }
body.light-theme .cs-title { color: rgba(19, 32, 30, .78); }
body.light-theme .cs-body p { color: rgba(19, 32, 30, .84); }
body.light-theme .cs-head:hover .cs-num, body.light-theme .cs-head:focus-visible .cs-num { color: var(--accent); border-color: var(--accent); }
body.light-theme .cs-head:focus-visible { outline-color: var(--accent); }
body.light-theme .city-steps li.is-active .cs-num { color: #fff; background: var(--accent); border-color: var(--accent); }