/* post-theme.css — dark theme + the light / dark / system switch, shared by case-study posts.
   The page :root holds the LIGHT tokens; html.dark (set before paint by the inline <head> snippet) flips them. */
html.dark{ color-scheme:dark; --ink:#fff; --body:#aeb7c4; --muted:#7d8899; --nav-link:rgba(255,255,255,.8);
  --bg:#111113; --surface:#1d1d20; --raised:#2a2a2e; --hover:#26262a; }   /* page sits a step above the #050608 footer → the seam reads */
html.dark .brand img{ filter:brightness(0) invert(1); }                  /* dark-ink logo → white (no light asset exists) */
html.dark .fill{ background:rgba(255,200,60,.16); color:#f3cf6b; }

/* switch — the old home-site theme pill (#theme-switch): 32px round buttons, 16px stroke icons, active = ink/12% */
.theme-pill button{ width:32px; height:32px; border:0; border-radius:9999px; display:flex; align-items:center; justify-content:center;
  background:none; color:var(--muted); cursor:pointer; }
.theme-pill button:hover, .theme-pill [aria-pressed="true"]{ color:var(--ink); }
.theme-pill [aria-pressed="true"]{ background:rgba(17,17,19,.12); }       /* Figma 485:656 pill */
html.dark .theme-pill [aria-pressed="true"]{ background:rgba(255,255,255,.12); }
.theme-pill button:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

/* .25s colour flip like css/site.css — only while switching (JS adds .theme-anim), so loads + hovers are untouched */
.theme-anim :is(body, article *, .nav *){ transition:background-color .25s ease, color .25s ease, filter .25s ease; }

/* the shared top nav (../css/nav.css) on a dark post: light ink, a dark tint and a dark frosted pill */
html.dark #nav-mobile{ color:#fff; }
html.dark #nav-mobile .nav-blur .tint{ background:linear-gradient(to bottom, rgba(17,17,19,.55), rgba(17,17,19,0)); }
html.dark #nav-mobile .nav-pill a{ color:#fff; }
html.dark #nav-mobile.nav-static .nav-pill{ background:rgba(42,42,46,.64); }