/* Kiln dark mode. <html data-theme="dark|light"> is set before first paint by the inline script in
   index.html (saved choice, else the device setting). Light is the base look; this file only darkens. */
html[data-theme="dark"] {
  --bg-1: #22211f; --bg-2: #0f0f0e;
  --ink: #ece9e3; --ink-2: #b7b2aa; --muted: #86827b; --line: rgba(255, 255, 255, .12);
  --card: #1b1a18; --card-2: #23221f; --field: #121110; --code-bg: #141311;
  color-scheme: dark;
}
html[data-theme="light"] { color-scheme: light; }

/* smooth swap when the toggle is pressed (only during the swap, so normal hovers stay snappy) */
html.theming, html.theming *, html.theming *::before { transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease, stroke .45s ease !important; }

/* ---------- toggle ---------- */
.theme-btn { position: relative; width: 34px; height: 34px; padding: 0; justify-content: center; overflow: hidden; }
.theme-btn svg { position: absolute; width: 16px; height: 16px; transition: transform .6s cubic-bezier(.2, .9, .2, 1), opacity .4s; }
.theme-btn .moon { transform: translateY(26px) rotate(-60deg); opacity: 0; }
html[data-theme="dark"] .theme-btn .sun { transform: translateY(-26px) rotate(90deg); opacity: 0; }
html[data-theme="dark"] .theme-btn .moon { transform: none; opacity: 1; }

/* frame + hero */
html[data-theme="dark"] .chrome::before { background: linear-gradient(rgba(18, 18, 17, .94), rgba(18, 18, 17, .72) 60%, rgba(18, 18, 17, 0)); }
html[data-theme="dark"] .token-pill { background: #ece9e3; color: #141414; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .9); }
html[data-theme="dark"] .tp-text { color: #5a5751; }
html[data-theme="dark"] .intro-bar i { background: linear-gradient(90deg, #a35b18, var(--ember)); }

/* sections */
html[data-theme="dark"] .tool:hover { background: rgba(255, 255, 255, .04); }
html[data-theme="dark"] .window { background: var(--card); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 0 1px var(--line); }
html[data-theme="dark"] .win-bar { background: var(--card-2); }
html[data-theme="dark"] .win-bar i { background: #3a3936; }
html[data-theme="dark"] .bubble.me { color: var(--bg-2); }
html[data-theme="dark"] .bubble.bot { background: #272521; }
html[data-theme="dark"] .code pre { color: #e6e1d8; }
html[data-theme="dark"] .code pre .k { color: #ffae5c; }
html[data-theme="dark"] .code pre .s { color: #8fd18a; }
html[data-theme="dark"] .code pre .c { color: #77736c; }
html[data-theme="dark"] .preview { background: #221b14; }
html[data-theme="dark"] .console { color: #6fcf8a; }
html[data-theme="dark"] .heatcard { background: rgba(255, 255, 255, .03); }
html[data-theme="dark"] .heatcard.hot { background: #070706; border-color: rgba(255, 180, 60, .25); }
html[data-theme="dark"] .bounties { background: var(--card); border: 1px solid var(--line); }
html[data-theme="dark"] .surfaces > div { background: var(--card); }
html[data-theme="dark"] .fundlive > div { background: rgba(255, 255, 255, .03); }
html[data-theme="dark"] .stages li, html[data-theme="dark"] .facts li { border-color: var(--line); }
html[data-theme="dark"] .facts li { border-top-color: rgba(255, 255, 255, .4); }

/* accounts */
html[data-theme="dark"] .chip.ghost:hover { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .chip img { background: #3a3936; }
html[data-theme="dark"] .modal { background: var(--card); box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .9), 0 0 0 1px var(--line); }
html[data-theme="dark"] .modal::backdrop { background: rgba(0, 0, 0, .6); }
html[data-theme="dark"] .prov { background: var(--card-2); }
html[data-theme="dark"] .or span { background: var(--card); }
html[data-theme="dark"] .menu { background: var(--card); box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .9), 0 0 0 1px var(--line); }
html[data-theme="dark"] .menu-head img { background: #3a3936; }
html[data-theme="dark"] .toast { background: #ece9e3; color: #141414; }

/* try the kiln */
html[data-theme="dark"] .trybox { background: var(--card); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 0 1px var(--line); }
html[data-theme="dark"] .try-head, html[data-theme="dark"] .try-form { background: var(--card-2); }
html[data-theme="dark"] .tmsg.me { color: var(--bg-2); }
html[data-theme="dark"] .tmsg.bot { background: #272521; }
html[data-theme="dark"] .tmsg.bot code { background: #34312c; }
html[data-theme="dark"] .piece { background: #2a2117; color: #f0b06a; }
html[data-theme="dark"] .piece.done { background: #16241a; color: #7fd197; }
html[data-theme="dark"] .try-chips button, html[data-theme="dark"] .try-actions button { background: var(--card-2); }
html[data-theme="dark"] .try-form input, html[data-theme="dark"] .submit-form input, html[data-theme="dark"] .submit-form textarea { background: var(--field); }
html[data-theme="dark"] .try-form button { color: var(--bg-2); }
html[data-theme="dark"] .try-preview { background: #1d1813; }
html[data-theme="dark"] .try-src { background: var(--code-bg); }