/*
 * Workshop / template-creator light theme tokens — aligned with FormaAPP styles.css (body.light-theme).
 * Standalone: variables on body. Embedded: same values on #workshopView so scoped tokens update.
 */

body.light-theme {
  --bg:        #f7f7f7;
  --surface:   #ffffff;
  --surface2:  #f7f7f7;
  --ink:       #1a202c;
  --ink2:      #2d3748;
  --ink3:      #718096;
  --border:    #f0f0f0;
  --shadow:    rgba(0, 0, 0, 0.08);
  --shadow-lg: rgba(0, 0, 0, 0.12);
  --tap-surface: #e2e8f0;
  --elev-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

body.light-theme #workshopView {
  --bg:        #f7f7f7;
  --surface:   #ffffff;
  --surface2:  #f7f7f7;
  --ink:       #1a202c;
  --ink2:      #2d3748;
  --ink3:      #718096;
  --border:    #f0f0f0;
  --shadow:    rgba(0, 0, 0, 0.08);
  --shadow-lg: rgba(0, 0, 0, 0.12);
  --tap-surface: #e2e8f0;
  --elev-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

/* Standalone pages: icon toggle (sun = dark mode active, moon = light mode active) */
.ws-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--ink2);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.ws-theme-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .ws-theme-toggle:hover {
    background: var(--surface2);
    color: var(--ink);
  }
}

.ws-theme-toggle:active {
  transform: scale(0.96);
}

.ws-theme-toggle .theme-icon-moon {
  display: none;
}

body.light-theme .ws-theme-toggle .theme-icon-sun {
  display: none;
}

body.light-theme .ws-theme-toggle .theme-icon-moon {
  display: block;
}