:root {
  color-scheme: light;
  --surface: #eae8df;
  --control-border: #1d201c25;
  --control-hover: #e7e4d9;
  --canvas-edge: rgba(81, 91, 70, .21);
  --canvas-node: rgba(85, 97, 73, .5);
  --canvas-particle: rgba(55, 65, 46, .72);
  --canvas-contour: 98, 106, 86;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #171b17;
  --ink: #f4f2eb;
  --muted: #afb6a6;
  --line: #394235;
  --orange: #ff7547;
  --accent: #ff916c;
  --surface: #232a22;
  --control-border: #f4f2eb35;
  --control-hover: #30382c;
  --canvas-edge: rgba(190, 205, 173, .28);
  --canvas-node: rgba(190, 205, 173, .65);
  --canvas-particle: rgba(210, 222, 195, .8);
  --canvas-contour: 190, 205, 173;
}
.theme-toggle {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--control-border);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { background: var(--control-hover); }
.theme-toggle:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-icon-sun, [data-theme="dark"] .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: block; }
.language-switch, .header .language-switch { border-color: var(--control-border); }
.language-switch a:hover:not([aria-current=page]) { background: var(--control-hover); }
[data-theme="dark"] .hero-bottom p,
[data-theme="dark"] .section-heading > p,
[data-theme="dark"] .section-heading small,
[data-theme="dark"] .service p,
[data-theme="dark"] .studio-side p,
[data-theme="dark"] .cross { color: var(--muted); }
[data-theme="dark"] .studio h2 > span { color: #a2b295; }
[data-theme="dark"] .round-link,
[data-theme="dark"] .scroll-wheel,
[data-theme="dark"] .tags > span,
[data-theme="dark"] .orbit-label span { border-color: var(--line); }
[data-theme="dark"] .hero-art:before { background: radial-gradient(ellipse at 52% 52%, #67785824, transparent 65%); }
[data-theme="dark"] .orbit-label span { background: #171b17b0; }
[data-theme="dark"] .effect-switch button:hover:not([aria-pressed=true]) { background: var(--control-hover); }
[data-theme="dark"] .step.is-current h3 { color: var(--orange); }
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--muted); }
[data-theme="dark"] .button-dark:hover { background: #d4ddc9; }
[data-theme="dark"] .live-browser-bar,
[data-theme="dark"] .preview-toolbar { background: var(--surface); color: var(--muted); border-color: var(--line); }
[data-theme="dark"] .live-browser-bar > span:first-child,
[data-theme="dark"] .preview-toolbar > span:first-child { color: var(--muted); }
[data-theme="dark"] .live-window,
[data-theme="dark"] .project-preview { border-color: var(--line); }
[data-theme="dark"] .live-phone-label { background: #171b17ed; border-color: var(--line); }
[data-theme="dark"] .scene-sage { background: #303c2e; }
[data-theme="dark"] .scene-peach { background: #493329; }
[data-theme="dark"] .scene-lavender { background: #383044; }
[data-theme="dark"] .scene-sand { background: #403b2e; }
[data-theme="dark"] .scene-blue { background: #2c3d41; }
[data-theme="dark"] .project-gallery li,
[data-theme="dark"] .cbp-l-project-details,
[data-theme="dark"] .related-projects a:hover { background: var(--surface); }
[data-theme="dark"] .project-gallery figcaption { background: var(--paper); }
[data-theme="dark"] .skip-link { background: var(--ink); color: var(--paper); }
/* Keep the orange brand panels and their original text contrast. */
[data-theme="dark"] .contact,
[data-theme="dark"] .marquee,
[data-theme="dark"] .site-footer {
  --ink: #1d201c;
  --paper: #f4f2eb;
  color: var(--ink);
}
@media (max-width: 700px) {
  .theme-toggle { width: 40px; height: 40px; padding: 9px; }
  .header-actions { gap: 8px; }
  .project-header-actions { gap: 10px; }
}