/* ===== Light / dark theme. Light is the default; the toggle in the menu switches the whole site. ===== */

/* ---- the toggle button ---- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;margin-left:4px;padding:0;border:1px solid currentColor;border-radius:50%;background:transparent;color:inherit;cursor:pointer;opacity:.85;transition:opacity .2s,background .2s,color .2s}
.theme-toggle:hover{opacity:1}
.theme-toggle svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun{display:none}
html[data-theme=dark] .theme-toggle .i-sun{display:block}
html[data-theme=dark] .theme-toggle .i-moon{display:none}
.theme-toggle:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---- sleek scrollbars, both themes ---- */
html{scrollbar-width:thin;scrollbar-color:#a9aca0 transparent}
html[data-theme=dark]{scrollbar-color:#2e3a5c transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#b4b7ab;border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#8e9185;background-clip:content-box;border:2px solid transparent}
html[data-theme=dark] ::-webkit-scrollbar-thumb{background:#2e3a5c;background-clip:content-box;border:2px solid transparent}
html[data-theme=dark] ::-webkit-scrollbar-thumb:hover{background:#44527e;background-clip:content-box;border:2px solid transparent}

/* ===== LIGHT: warm, earthy glow =====
   the same soft edge glows as Midnight, but in natural pigments: sage and moss, sand and ochre,
   a touch of clay, over a warm stone paper. No blues, no oranges. */
:root{--a-head:#ebe6d8ea;--a-card:#d9d2c0}
body{background-color:#e9e4d7;
  background:
   radial-gradient(1200px 720px at 6% -6%,#fbf6e9 0%,rgba(251,246,233,0) 62%),
   radial-gradient(800px 1050px at 105% 420px,rgba(160,176,120,.46) 0%,rgba(160,176,120,0) 68%),
   radial-gradient(760px 980px at -12% 780px,rgba(216,190,140,.24) 0%,rgba(216,190,140,0) 64%),
   radial-gradient(900px 900px at 103% 74%,rgba(190,148,118,.34) 0%,rgba(190,148,118,0) 65%),
   radial-gradient(720px 820px at -10% 95%,rgba(150,164,112,.16) 0%,rgba(150,164,112,0) 64%),
   linear-gradient(180deg,#ece7da 0%,#ddd5c2 100%)}
header.scrolled{background:#ebe6d8f2}
.case-page header{background:#ebe6d8ea}
.case-grid img,.case-next-thumb{background:#d9d2c0}
.case-next::before{background:rgba(92,78,46,.17)}

/* on phones the glows shrink so they hug the edges instead of washing the whole screen */
@media(max-width:750px){
  body{background:
   radial-gradient(560px 460px at 0% -3%,#fbf6e9 0%,rgba(251,246,233,0) 62%),
   radial-gradient(230px 560px at 112% 330px,rgba(160,176,120,.50) 0%,rgba(160,176,120,0) 70%),
   radial-gradient(230px 560px at -16% 760px,rgba(216,190,140,.26) 0%,rgba(216,190,140,0) 66%),
   radial-gradient(260px 540px at 112% 62%,rgba(190,148,118,.36) 0%,rgba(190,148,118,0) 68%),
   radial-gradient(240px 480px at -14% 94%,rgba(150,164,112,.17) 0%,rgba(150,164,112,0) 66%),
   linear-gradient(180deg,#ece7da 0%,#ddd5c2 100%)}
}

/* ===== DARK PALETTE: "Midnight" =====
   deep navy ground, ivory text, cool slate lines, one warm copper accent.
   Change a color here and the whole dark theme follows. */
html[data-theme=dark]{
  --d-bg:#0a0e18;      /* page */
  --d-bg2:#0f1524;     /* raised areas */
  --d-card:#141c30;    /* image wells, tiles */
  --d-fg:#e9ebf3;      /* main text (ivory with a cool tint) */
  --d-soft:#b3b9cc;    /* secondary text */
  --d-mute:#868ea6;    /* labels, captions */
  --d-line:#1d2539;    /* hairlines */
  --d-line2:#2c3654;   /* controls, outlines */
  --d-accent:#e2a56e;  /* copper: focus rings, selected states, small highlights */

  --paper:#0f1524;--ink:#e9ebf3;color-scheme:dark;
  /* archive-page variables follow the same palette */
  --a-fg:var(--d-fg);--a-mute:var(--d-mute);--a-soft:var(--d-soft);--a-line:var(--d-line);--a-line2:var(--d-line2);--a-card:var(--d-card);--a-head:#0a0e18ea;--a-on:#0a0e18;--a-accent:var(--d-accent)}

html[data-theme=dark] body{color:var(--d-fg);background-color:var(--d-bg);
  background:
   radial-gradient(1100px 650px at 8% -8%,#17203a 0%,transparent 62%),
   radial-gradient(900px 620px at 104% 38%,#111a30 0%,transparent 58%),
   radial-gradient(1000px 700px at -6% 78%,#0f1730 0%,transparent 60%),
   linear-gradient(180deg,#0c111d 0%,#080b13 100%)}
/* grain: light noise on dark */
html[data-theme=dark] body::before{mix-blend-mode:screen;filter:invert(1);opacity:.05}
html[data-theme=dark] a:focus-visible,html[data-theme=dark] button:focus-visible{outline-color:var(--d-accent)}

/* ---- header once it becomes a solid bar ---- */
html[data-theme=dark] header.scrolled{background:#0a0e18ea;color:var(--d-fg);border-bottom-color:var(--d-line)}
html[data-theme=dark] .case-page header{background:#0a0e18ea;color:var(--d-fg);border-bottom-color:var(--d-line)}
html[data-theme=dark] .case-page .site-name,html[data-theme=dark] .case-page header nav a{color:var(--d-fg)}

/* ---- homepage ---- */
html[data-theme=dark] .section-head,html[data-theme=dark] .caption{border-color:var(--d-line)}
html[data-theme=dark] .caption>span{color:var(--d-mute)}
html[data-theme=dark] .role{color:var(--d-soft)}
html[data-theme=dark] .archive-feature{border-top-color:var(--d-line)}
html[data-theme=dark] .archive-feature p,html[data-theme=dark] .af-side p{color:var(--d-soft)}
html[data-theme=dark] .archive-feature .archive-action{border-color:var(--d-line2)}
html[data-theme=dark] .archive-feature .archive-action:hover{border-color:var(--d-accent);color:var(--d-accent)}
html[data-theme=dark] .info{border-top-color:var(--d-line)}
html[data-theme=dark] .info p{color:var(--d-soft)}
html[data-theme=dark] .info .about-panels p{color:var(--d-fg)}
html[data-theme=dark] .info a,html[data-theme=dark] .text-link{border-color:var(--d-line2)}
html[data-theme=dark] .about-tabs button{border-color:var(--d-line2);color:var(--d-fg)}
html[data-theme=dark] .about-tabs button:hover{border-color:var(--d-accent)}
html[data-theme=dark] .about-tabs button[aria-selected=true]{background:var(--d-fg);color:#0a0e18;border-color:var(--d-fg)}
html[data-theme=dark] .contact>a,html[data-theme=dark] .contact>a+a.contact-social{border-bottom-color:var(--d-line2)}
html[data-theme=dark] .contact>a:hover{color:var(--d-accent)}
html[data-theme=dark] .contact .label{color:var(--d-mute)}
html[data-theme=dark] footer{border-top-color:var(--d-line);color:var(--d-mute)}
html[data-theme=dark] footer a:hover{color:var(--d-fg)}
/* the NEDS.AI section: navy tiles, light text */
html[data-theme=dark] .notes{background:var(--d-bg2);color:var(--d-fg)}
html[data-theme=dark] .notebook .video-note{background:#18213a;color:var(--d-fg)}
html[data-theme=dark] .video-note:hover{background:#1f2a48}
html[data-theme=dark] .notebook>div.lab-note,html[data-theme=dark] .notebook .lab-note{background:#dfe2ec;color:#161b2b}

/* ---- case studies ---- */
html[data-theme=dark] .case-back,html[data-theme=dark] .case-link,html[data-theme=dark] .case-next-go{border-bottom-color:var(--d-line2)}
html[data-theme=dark] .case-summary{color:#c7ccdc}
html[data-theme=dark] .case-meta,html[data-theme=dark] .case-next{border-top-color:var(--d-line)}
html[data-theme=dark] .case-meta dt,html[data-theme=dark] .case-vertical figcaption,html[data-theme=dark] .case-grid figcaption{color:var(--d-mute)}
html[data-theme=dark] .case-block{border-top-color:var(--d-line)}
html[data-theme=dark] .case-block:last-child{border-bottom-color:var(--d-line)}
html[data-theme=dark] .case-block p{color:#d8dcea}
html[data-theme=dark] .case-block li{border-bottom-color:#18203a}
html[data-theme=dark] .case-grid img,html[data-theme=dark] .case-next-thumb{background:var(--d-card)}
html[data-theme=dark] .case-next::before{background:#111a30}

/* smooth switch */
body,header,footer,.case-block,.info,.section-head,.caption{transition:background-color .35s ease,color .35s ease,border-color .35s ease}
@media(prefers-reduced-motion:reduce){body,header,footer,.case-block,.info,.section-head,.caption{transition:none}}

/* embedded players keep their own light color scheme, so no white backdrop shows around them in dark mode */
iframe{color-scheme:light}
html[data-theme=dark] .lb-stage,html[data-theme=dark] .hero-player{background:#000}