/* Site-wide theme system. Light is the default. Dark mode is applied by
   setting `data-theme="dark"` on <html>, which `theme.js` does based on
   localStorage + prefers-color-scheme.

   Each page already declares its own light-mode variable values inside
   its <style> block (--bg, --text, --muted, --border, --surface, etc).
   This file adds the dark overrides for those same variable names, so
   every component that already reads `var(--text)` etc. flips
   automatically.

   The toggle button styles + a smooth crossfade transition live here
   too so they're consistent everywhere they're rendered. */

/* ── Dark theme overrides ────────────────────────────────────────────
   Token names match the union of every page's existing light-mode
   :root block. Pages that don't define one of these will simply
   ignore that override. */
html[data-theme="dark"] {
  --bg:        #0a0a0a;
  --surface:   #141414;
  --surface-2: #1c1c1c;
  --border:    rgba(255, 255, 255, 0.10);
  --text:      #e6e6e2;
  --muted:     #8a8a86;
  --green:     #2c8a4e;
  --red:       #c2474a;
  --warn:      #d4a000;
  --info:      #6a8ad0;

  /* Button colours auto-invert so a "dark on light" pill becomes
     "light on dark" without per-page overrides. Used by .btn-primary
     and .nav-cta on every page. */
  --button-bg: #f4f4ee;
  --button-fg: #0a0a0a;

  /* Tutorial and other pages nest a callout/code surface; give them
     a slightly elevated background so they read against --bg. */
  --code-bg:   #161616;
  --code-fg:   #e6e6e2;
}

/* Light-mode equivalents for the new shared button vars. Each page's
   own `--text` value is dark in light mode, so we mirror that here. */
:root {
  --button-bg: #121212;
  --button-fg: #ffffff;
  --code-bg:   #f4f1ea;
  --code-fg:   #121212;
}

/* Smooth crossfade so the theme switch feels intentional, not jarring.
   We restrict transition to colour properties so layout (transform,
   etc.) stays rigid. 200ms is short enough to feel snappy. */
html, body {
  transition: background-color 200ms ease, color 200ms ease;
}
nav, header, footer, section, aside,
.btn-primary, .btn-outline, .nav-cta,
.callout, .stat-cell, .agent-tile, .live-card,
.hero-cap, .park-cap, .vc-cap {
  transition: background-color 200ms ease,
              color 200ms ease,
              border-color 200ms ease;
}

/* Honour reduced-motion: kill the colour transition so users who
   prefer no motion get an instant theme swap. */
@media (prefers-reduced-motion: reduce) {
  html, body, nav, header, footer, section, aside,
  .btn-primary, .btn-outline, .nav-cta,
  .callout, .stat-cell, .agent-tile, .live-card,
  .hero-cap, .park-cap, .vc-cap {
    transition: none;
  }
}

/* ── Theme toggle pill ───────────────────────────────────────────────
   Two-icon segmented control. Sun = light mode, Moon = dark mode.
   The active button has an inset background that visually contrasts
   with the pill (so the active state is unambiguous). */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  flex-shrink: 0;
}
.theme-toggle button {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  padding: 0;
  transition: background-color 200ms ease, color 200ms ease;
}
.theme-toggle button:hover {
  color: var(--text);
}
.theme-toggle button.is-active {
  /* Inset background that's the OPPOSITE of the active theme's body,
     so light mode shows a white pill thumb on a soft surface, dark
     mode shows a black pill thumb on a slightly-lighter surface. */
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10),
              inset 0 0 0 1px var(--border);
}
.theme-toggle button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.theme-toggle svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* ── Per-element dark overrides ──────────────────────────────────────
   Most things flip via the variable. These are the explicit fixes for
   colours that were hard-coded in light-mode CSS and need a dark-mode
   counterpart. Kept here (not in each page's <style>) so adding a new
   page only requires linking theme.css and dropping in the toggle. */

/* Buttons that hard-coded `background: var(--text); color: #fff` would
   become invisible in dark mode (light bg + white text). The new
   --button-bg / --button-fg vars give them a clean opposite. */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .nav-cta,
html[data-theme="dark"] .park-btn.primary,
html[data-theme="dark"] .cta {
  background: var(--button-bg);
  color: var(--button-fg) !important;
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .nav-cta:hover,
html[data-theme="dark"] .park-btn.primary:hover,
html[data-theme="dark"] .cta:hover {
  /* Page CSS sets `background: #333` on hover, which would flip the
     cream pill to dark grey - jarring. Pin bg to a slightly-dimmed
     button-bg so the hover is a subtle darken instead of an invert. */
  background: #d4d4d0 !important;
  color: var(--button-fg) !important;
}

/* Outline buttons: keep transparent bg, ensure text + border use
   theme vars so they read on dark. */
html[data-theme="dark"] .btn-outline {
  border-color: var(--border);
  color: var(--text);
}

/* Nav glassmorphism: fade-in dark backdrop instead of light. */
html[data-theme="dark"] nav {
  background: rgba(10, 10, 10, 0.85) !important;
  border-bottom-color: var(--border);
}

/* Inline code blocks. Most pages style `code` with a hard-coded light
   bg; flip to a dark surface in dark mode. */
html[data-theme="dark"] code {
  background: var(--code-bg) !important;
  color: var(--code-fg);
}

/* Cube body on the home/tokenomics cubes: the existing `#1a1a1a`
   blends with the dark bg. Lighten it a touch in dark mode so the
   cube reads as a 3D shape, not a hole. */
html[data-theme="dark"] .hero-cube .cube-face,
html[data-theme="dark"] .park-cube .cube-face {
  background: #2a2a2a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
              inset 0 0 24px rgba(0, 0, 0, 0.45);
}

/* The cube wrapper backgrounds set per-page (cream/paper) shouldn't
   bleed through in dark mode. Vision-cube on the pitch deck already
   lives on a dark slide so it stays as is. */
html[data-theme="dark"] .stack-runway,
html[data-theme="dark"] .park-cube-stage {
  background: var(--bg) !important;
}

/* Hero brand mark image: the spiral logo is black on a transparent
   PNG. In dark mode we invert it to white so it stays visible. */
html[data-theme="dark"] .nav-logo-img,
html[data-theme="dark"] img.brand-logo,
html[data-theme="dark"] .sb-brand-logo {
  filter: invert(1) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.04));
}

/* ── $FLOOR Token band ───────────────────────────────────────────────
   The .token-section uses `background: var(--text)` as an inversion
   trick - dark band on cream page in light mode. In dark mode `--text`
   becomes cream, so without this override the band would be a
   light island with hard-coded white foreground text (invisible).
   Swap to --surface-2 so it stays a SLIGHTLY lighter dark surface
   against --bg, preserving the "this section stands out" rhythm. */
html[data-theme="dark"] .token-section {
  background: var(--surface-2) !important;
}
/* Inner button on the band: hard-coded `background: #fff` reads ok in
   light mode but fights the new dark band. Flip to a soft cream pill
   with dark text - still pops, still legible. */
html[data-theme="dark"] .token-btn {
  background: var(--text) !important;
  color: var(--bg) !important;
}
html[data-theme="dark"] .token-btn:hover {
  background: #d4d4d0 !important;
}
/* The dotted decorative mark in the band (.token-section::before /
   .token-mark) uses a low-opacity white pattern. That works on a
   dark band, so no change needed - just left here for the next dev
   to know it's been considered. */

/* ── Install / code blocks ──────────────────────────────────────────
   `.code-block` uses the same `background: var(--text)` inversion
   trick as the token band. Same fix: in dark mode use the elevated
   code surface so the block stays distinct from the surrounding bg
   and the existing light foreground text reads cleanly. */
html[data-theme="dark"] .code-block {
  background: var(--code-bg) !important;
  color: var(--code-fg) !important;
}
