/* Shared dark-mode tokens + theme toggle control.
   Loaded by index.html, case-study-fenergo.html, case-study-santander.html. */

[data-theme="dark"]{
  --paper: #15160E;
  --paper-glow: #2E2A18;
  --panel: #262820;
  --ink: #ECEEE2;
  --ink-soft: #A9AD98;
  --accent: #E2604F;
  --structure: #969C86;
  --paper-rgb: 21,22,14;
  --ink-rgb: 236,238,226;
  --accent-rgb: 226,96,79;
}

.nav-left{ display:flex; align-items:center; gap:20px; }
.nav-right{ display:flex; align-items:center; gap:24px; }
@media (max-width: 620px){ .nav-right{ gap:14px; } }

.theme-toggle{
  --tt-w: 52px; --tt-h: 28px; --tt-pad: 3px;
  position: relative; width: var(--tt-w); height: var(--tt-h);
  padding: 0; margin: 0; border: 1px solid var(--ink); border-radius: 999px;
  background: var(--panel); cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover{ border-color: var(--accent); }
.theme-toggle:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

.theme-toggle-track{
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px; box-sizing: border-box; pointer-events: none;
}
.theme-icon{ position: relative; z-index: 1; transition: opacity 0.2s ease; }
.theme-icon-sun{ color: var(--ink); opacity: 1; }
.theme-icon-moon{ color: var(--ink-soft); opacity: 0.45; }
[data-theme="dark"] .theme-icon-sun{ opacity: 0.45; }
[data-theme="dark"] .theme-icon-moon{ opacity: 1; color: var(--accent); }

.theme-toggle-thumb{
  position: absolute; top: calc(var(--tt-pad) - 1px); left: calc(var(--tt-pad) - 1px);
  width: calc(var(--tt-h) - (var(--tt-pad) * 2));
  height: calc(var(--tt-h) - (var(--tt-pad) * 2));
  border-radius: 50%; background: var(--accent); border: 1px solid var(--ink);
  transition: transform 0.22s ease, background 0.22s ease;
}
[data-theme="dark"] .theme-toggle-thumb{
  transform: translateX(calc(var(--tt-w) - var(--tt-h)));
  background: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce){
  .theme-toggle-thumb, .theme-icon{ transition: none; }
}

.figma-embed{ border: 1px solid var(--line); }

[data-theme="dark"] .finding-toggle .tag{ color: #EA7C6D; }
[data-theme="dark"] .skill-tag{ color: #EA7C6D; }
[data-theme="dark"] .img-placeholder .ph-file,
[data-theme="dark"] .compare-label.after{ color: #EA7C6D; }