/* Shared theme behaviour and project surfaces. The active colour palette
   loads after this file, so disabling the blue experiment still works. */
:root { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07110f;
  --surface: #0d1714;
  --surface-alt: #101c18;
  --surface-soft: #18251f;
  --soft: var(--surface-alt);
  --ink: #f7fbf5;
  --muted: #c9d4ce;
  --subtle: #97a69d;
  --line: #24342d;
  --accent: #34d399;
  --accent-dark: #2dd4bf;
  --accent-strong: #a7f3d0;
  --accent-soft: #123b31;
  --primary: #d6d3d1;
  --primary-soft: #161f1a;
  --project: var(--accent);
  --project-soft: var(--accent);
  --gold: var(--accent);
  --gold-soft: var(--accent-soft);
  --plum: var(--accent);
  --plum-soft: var(--accent-soft);
  --navy-soft: var(--surface-soft);
  --button-bg: #0f766e;
  --button-hover: #0d5f58;
  --panel-gradient: linear-gradient(135deg, var(--surface-alt), var(--surface-soft));
  --shadow: 0 4px 18px -6px rgba(0,0,0,.42);
  --shadow-lg: 0 20px 45px -18px rgba(0,0,0,.45);
}

.project-actions { display: flex; align-items: center; gap: 18px; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 44px; width: 44px; height: 44px; padding: 10px;
  border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); background: var(--surface); cursor: pointer;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.theme-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .theme-sun, html[data-theme="dark"] .theme-toggle .theme-moon { display: none; }
html[data-theme="dark"] .theme-toggle .theme-sun { display: block; }

html[data-theme="dark"] .header,
html[data-theme="dark"] .chapter-nav { background: var(--bg); border-color: var(--line); }
html[data-theme="dark"] :is(.overview, .approach-section, .dashboard-chapter) { background: var(--panel-gradient); }
html[data-theme="dark"] :is(.facts, .principle, .goal-card:first-child, .decision-note, .brand-signal, .browser, .browser-address, .family-filter, .collection-control, figure, figcaption, .next-project, footer) { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] figcaption { color: var(--muted); }
html[data-theme="dark"] figcaption strong { color: var(--ink); }
html[data-theme="dark"] :is(.hero-media, .hero-stage, .hero-tile, .flyer-frame, .image-frame:not(.dark), .email-frame, .magazine, .showcase-item, .ownership-visual, .product-showcase-banner, .product-frame, .dashboard-hero-figure, .dashboard-frame, .browser-bar, .email-scroll-toolbar, .email-scroll-viewport) { background: var(--surface-alt); border-color: var(--line); }
html[data-theme="dark"] .email-scroll-address { background: var(--surface-soft); }
html[data-theme="dark"] .showcase-item::after { background: transparent; }
html[data-theme="dark"] :is(.button, .family-filter:hover, .family-filter[aria-pressed="true"], .collection-control:not(:disabled):hover) { background: var(--button-bg); color: #fff; }
html[data-theme="dark"] .collection-control:disabled:hover { background: var(--surface); color: var(--muted); }

@media (max-width: 520px) {
  html:not([data-portfolio-page="home"]) .nav { gap: 12px; }
  .project-actions { gap: 10px; }
  .project-actions .back-link { font-size: 12px; }
}
@media print { .theme-toggle { display: none !important; } }