/* Day/night theme for sub-pages (case studies, 404). Mirrors the homepage:
   light = Daylight Brass, dark = Brass on Slate. Loaded after case.css. */

/* ============ LIGHT (default) ============ */
:root{
  --bg:#FAF7F1;
  --surface:#FFFFFF;
  --surface-2:#F2EEE6;
  --fg:#1A1813;
  --muted:#5C594F;
  --faint:#7A766A;
  --border:rgba(26,24,19,0.12);
  --border-strong:rgba(26,24,19,0.22);
  --accent:#1F5F45;
  --brass:#A8722E;
}
body{background:var(--bg);transition:background .3s ease,color .3s ease}
::selection{background:var(--accent);color:var(--bg)}
.serif-it{color:var(--accent)}
.cta{background:var(--accent);border-color:var(--accent);color:#FAF7F1}
.cta:hover{box-shadow:0 8px 24px rgba(31,95,69,.28);transform:translateY(-1px)}
.cta::after{background:linear-gradient(105deg,transparent 22%,rgba(255,255,255,.15) 40%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.15) 60%,transparent 78%)}
a:focus-visible,.cta:focus-visible{outline-color:var(--accent)}
.nav{background:color-mix(in srgb,var(--bg) 85%, transparent);border-bottom:1px solid var(--border)}
.brand svg path{stroke:var(--fg)}
.footer__brand svg path{stroke:var(--faint)}
.case::before{background:radial-gradient(72% 85% at 50% 0%, rgba(31,95,69,0.07) 0%, rgba(168,114,46,0.04) 35%, transparent 65%)}
.final::before{background:radial-gradient(80% 120% at 50% 50%, rgba(31,95,69,0.06) 0%, transparent 70%)}
.case-sec__label,.tag{
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:0.16em;
}
.case-sec__label{color:var(--brass)}
.tag{color:#8A6A38;border-color:rgba(168,114,46,0.35)}
.tag .dot{background:var(--brass)}
.case-list li{color:#3E3B33}
.case-list li::before{background:var(--brass)}
.case__body{color:var(--muted)}
.case__bridge{border-left-color:var(--brass)}
.case__img{background:var(--surface-2)}
h1,h2,h3{letter-spacing:-0.025em}

/* ============ DARK ============ */
html[data-theme="dark"]{
  --bg:#0C1220;
  --surface:#121a2b;
  --surface-2:#182236;
  --fg:#F2F4F8;
  --muted:#9AA3B5;
  --faint:#7E8798;
  --border:rgba(224,164,88,0.14);
  --border-strong:rgba(224,164,88,0.30);
  --accent:#E0A458;
  --brass:#E0A458;
}
html[data-theme="dark"] body{background:
  radial-gradient(1100px 550px at 50% -180px, rgba(224,164,88,0.05), transparent 70%),
  var(--bg)}
html[data-theme="dark"] ::selection{background:#E0A458;color:#0C1220}
html[data-theme="dark"] .serif-it{color:#E8B876}
html[data-theme="dark"] .cta{background:#E0A458;border-color:#E0A458;color:#0C1220}
html[data-theme="dark"] .cta:hover{box-shadow:0 10px 28px rgba(224,164,88,.22)}
html[data-theme="dark"] .cta::after{background:linear-gradient(105deg,transparent 22%,rgba(0,0,0,.20) 40%,rgba(255,255,255,1) 50%,rgba(0,0,0,.20) 60%,transparent 78%)}
html[data-theme="dark"] .nav{background:color-mix(in srgb,var(--bg) 82%, transparent)}
html[data-theme="dark"] .brand svg path{stroke:#F2F4F8}
html[data-theme="dark"] .footer__brand svg path{stroke:#7E8798}
html[data-theme="dark"] .case::before{background:radial-gradient(72% 85% at 50% 0%, rgba(224,164,88,0.10) 0%, rgba(224,164,88,0.04) 35%, transparent 65%)}
html[data-theme="dark"] .final::before{background:radial-gradient(80% 120% at 50% 50%, rgba(224,164,88,0.08) 0%, transparent 70%)}
html[data-theme="dark"] .case-sec__label{color:rgba(232,184,118,0.9)}
html[data-theme="dark"] .tag{color:#C79B60;border-color:rgba(224,164,88,0.35)}
html[data-theme="dark"] .tag .dot{background:#E0A458}
html[data-theme="dark"] .case-list li{color:#C4CAD6}
html[data-theme="dark"] .case__bridge{border-left-color:#E0A458}
html[data-theme="dark"] .case__img{background:var(--surface)}
html[data-theme="dark"] a:focus-visible,
html[data-theme="dark"] .cta:focus-visible{outline-color:#E0A458}

/* ============ theme toggle button ============ */
.theme-toggle{
  position:fixed;right:16px;bottom:16px;z-index:998;
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--surface);color:var(--fg);
  border:1px solid var(--border);
  box-shadow:0 4px 14px rgba(0,0,0,.15);
  transition:transform .2s ease,background .3s ease,color .3s ease;
}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle:hover{transform:translateY(-2px)}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.theme-toggle .icon-sun{display:block}
.theme-toggle .icon-moon{display:none}
html[data-theme="dark"] .theme-toggle .icon-sun{display:none}
html[data-theme="dark"] .theme-toggle .icon-moon{display:block}

/* ============ mobile menu (hamburger -> X, fullscreen overlay) ============ */
.menu-btn{display:none;position:relative;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:0;flex:none}
.menu-btn span{position:absolute;left:11px;right:11px;top:50%;height:2px;background:var(--fg);border-radius:2px;transition:transform .3s ease}
.menu-btn span:nth-child(1){transform:translateY(-5px)}
.menu-btn span:nth-child(2){transform:translateY(4px)}
html.menu-open .menu-btn span:nth-child(1){transform:rotate(45deg)}
html.menu-open .menu-btn span:nth-child(2){transform:rotate(-45deg)}
.menu-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.mobile-menu{position:fixed;inset:0;z-index:49;background:var(--bg);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s ease}
html.menu-open .mobile-menu{opacity:1;pointer-events:auto}
html.menu-open{overflow:hidden}
.mobile-menu nav{display:flex;flex-direction:column;gap:36px;text-align:center}
.mobile-menu a{font-size:30px;font-weight:500;letter-spacing:-0.02em;color:var(--fg)}
@media(max-width:639px){
  .menu-btn{display:block}
  .nav__right .cta--sm{display:none}
}

html[data-theme="dark"] .case__img img{filter:brightness(.85) saturate(.92)}