/* Kala Art Wrap — theme tokens shared by every public page.
   Dark is the brand default; html[data-theme="light"] swaps the palette. */
:root, html[data-theme="dark"] {
  --fg-rgb: 251 241 234;     /* cream ink */
  --bg-rgb: 18 9 11;         /* wine-black surface */
  --line-rgb: 255 211 220;   /* blush hairlines */
  --gold-rgb: 217 176 122;
  --surface-2: #170b0e;
  --surface-3: #1d0e13;
  --card-a: #26121a;
  --card-b: #140a0d;
  --glow: rgba(140, 22, 49, .42);
  --shadow-rgb: 0 0 0;
  color-scheme: dark;
}

html[data-theme="light"] {
  --surface: #f7efe9;
  --surface-2: #f3e7e0;
  --surface-3: #efe0d8;
  --card-a: #fffaf7;
  --card-b: #f5e9e3;
  --ink: #2b1318;
  --ink-soft: #4a2a31;
  --ink-mute: rgba(43, 19, 24, .68);
  --blush: #b8325a;
  --rose: #d04a70;
  --wine: #8c1631;
  --gold: #9a6c33;
  --gold-soft: #86592a;
  --line: rgba(140, 22, 49, .14);
  --fg-rgb: 43 19 24;
  --bg-rgb: 247 239 233;
  --line-rgb: 140 22 49;
  --gold-rgb: 154 108 51;
  --glow: rgba(232, 113, 141, .28);
  --shadow-rgb: 90 30 45;
  color-scheme: light;
}

/* smooth cross-fade only while switching */
html.theme-swap, html.theme-swap *, html.theme-swap *::before, html.theme-swap *::after {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, fill .4s ease, stroke .4s ease !important;
}

/* ---------- header placement (flex headers) + mobile floating toggle ---------- */
.head-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.head-end .pill { margin-left: 0 !important; }
.m-theme { display: none !important; }
@media (max-width: 900px), (max-aspect-ratio: 4 / 5) {
  .site-head .theme-toggle, .hero-theme { display: none !important; }
  .m-theme {
    display: grid !important;
    position: fixed !important;
    z-index: 52;
    top: max(16px, env(safe-area-inset-top));
    right: 74px;
    width: 48px !important;
    height: 48px !important;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .45);
  }
}

/* ---------- shared light-theme touches ---------- */
html[data-theme="light"] .display em { background-image: linear-gradient(180deg, #d04a70, #8c1631); }
html[data-theme="light"] .brand img { filter: brightness(.62) saturate(1.5) drop-shadow(0 6px 16px rgba(140, 22, 49, .2)); }

/* ---------- toggle button ---------- */
.theme-toggle {
  position: relative;
  flex: none;
  width: clamp(36px, 4.4dvh, 48px);
  height: clamp(36px, 4.4dvh, 48px);
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgb(var(--line-rgb) / .28);
  background: rgb(var(--fg-rgb) / .06);
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform .4s cubic-bezier(.25, .8, .28, 1), background-color .3s, border-color .3s;
}
.theme-toggle:hover { transform: rotate(-12deg) scale(1.05); background: rgb(var(--fg-rgb) / .12); }
.theme-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.theme-toggle svg {
  position: absolute;
  width: 46%;
  height: 46%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), opacity .35s;
}
.theme-toggle .i-sun { transform: translateY(120%) rotate(90deg); opacity: 0; }
.theme-toggle .i-moon { transform: none; opacity: 1; }
html[data-theme="light"] .theme-toggle .i-sun { transform: none; opacity: 1; }
html[data-theme="light"] .theme-toggle .i-moon { transform: translateY(-120%) rotate(-90deg); opacity: 0; }