:root { color-scheme: light; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #10191F;
  --surface: #18252D;
  --ink: #FBF6EE;
  --muted: #ABBAC1;
  --line: #34434D;
  --theme-header: #13212A;
  --theme-footer: #13212A;
  --theme-border: #34434D;
  --theme-glow: rgba(1, 239, 150, .06);
  --theme-card: #18252D;
  --theme-shadow: rgba(0, 0, 0, .18);
  --theme-icon-bg: #17362D;
  --theme-icon-ink: #6CEBB2;
  --theme-overline: #A2B4BC;
  --theme-tag-bg: #213A32;
  --theme-tag-ink: #B1E9CE;
  --theme-cta-bg: #01EF96;
  --theme-cta-ink: #04283C;
  --theme-cta-hover: #67F2BF;
  --theme-quiet: #ABBAC1;
  --theme-copyright: #A2B4BC;
  --theme-link-hover: #01EF96;
  --theme-focus: #01EF96;
  --theme-light-logo: none;
  --theme-dark-logo: block;
}

/* The page still follows device appearance when JavaScript is unavailable. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --paper: #10191F;
    --surface: #18252D;
    --ink: #FBF6EE;
    --muted: #ABBAC1;
    --line: #34434D;
    --theme-header: #13212A;
    --theme-footer: #13212A;
    --theme-border: #34434D;
    --theme-glow: rgba(1, 239, 150, .06);
    --theme-card: #18252D;
    --theme-shadow: rgba(0, 0, 0, .18);
    --theme-icon-bg: #17362D;
    --theme-icon-ink: #6CEBB2;
    --theme-overline: #A2B4BC;
    --theme-tag-bg: #213A32;
    --theme-tag-ink: #B1E9CE;
    --theme-cta-bg: #01EF96;
    --theme-cta-ink: #04283C;
    --theme-cta-hover: #67F2BF;
    --theme-quiet: #ABBAC1;
    --theme-copyright: #A2B4BC;
    --theme-link-hover: #01EF96;
    --theme-focus: #01EF96;
    --theme-light-logo: none;
    --theme-dark-logo: block;
  }
}

.site-header {
  height: auto;
  min-height: 96px;
  padding-top: 20px;
  padding-bottom: 20px;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--theme-header, rgba(255, 254, 250, .72));
  border-bottom-color: var(--theme-border, rgba(218, 215, 208, .62));
}
.hero { background: radial-gradient(circle at 50% 10%, var(--theme-glow, rgba(255, 255, 255, .85)), transparent 42%), var(--paper); }
.principle-icon { background: var(--theme-icon-bg, #E5F4E8); color: var(--theme-icon-ink, var(--petrol)); }
.principle-icon svg { stroke: var(--theme-icon-ink, var(--petrol)); }
.project-card {
  background: var(--theme-card, rgba(255, 254, 250, .94));
  border-color: var(--theme-border, rgba(218, 215, 208, .66));
  box-shadow: 0 22px 60px var(--theme-shadow, rgba(4, 40, 60, .08));
}
.overline { color: var(--theme-overline, #98A0A3); }
.tags span { background: var(--theme-tag-bg, #E8F0EB); color: var(--theme-tag-ink, #214E43); }
.project-cta { background: var(--theme-cta-bg, var(--petrol)); color: var(--theme-cta-ink, var(--cream)); }
.project-cta:hover { background: var(--theme-cta-hover, #06364F); }
.coming-soon { color: var(--theme-quiet, #7C878D); }
.site-footer { background: var(--theme-footer, rgba(255, 254, 250, .75)); border-top-color: var(--theme-border, rgba(218, 215, 208, .72)); }
.copyright { color: var(--theme-copyright, #8A9296); }
.footer-email:hover { color: var(--theme-link-hover, var(--petrol)); }
.theme-logo-light { display: var(--theme-light-logo, block); }
.theme-logo-dark { display: var(--theme-dark-logo, none); }

.theme-picker { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 650; }
.theme-picker[hidden] { display: none; }
.theme-options { display: inline-flex; flex-shrink: 0; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.theme-options button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.theme-options button:hover { color: var(--ink); background: var(--theme-tag-bg, #E8F0EB); }
.theme-options button[aria-pressed="true"] { background: var(--emerald); color: #04283C; }
.theme-options svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--theme-focus, #007E50); outline-offset: 4px; }

@media (max-width: 840px) {
  .site-header { min-height: 82px; padding-top: 16px; padding-bottom: 16px; }
}
@media (max-width: 520px) {
  .site-header { padding-left: 18px; padding-right: 18px; gap: 12px; }
  .theme-picker > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .project-cta { transition: none; }
  .project-cta:hover { transform: none; }
}