/* UI Tokens (public + viewer) — Mosaico
   - Defaults are derived from theme variables.
   - Admin can override tokens via CSS vars injected by ui_tokens_style_block().
*/

/* Default token values (fallbacks). */
:root{
  /* Buttons */
  --btn-primary-bg: var(--accent);
  --btn-primary-fg: #ffffff;
  --btn-primary-border: rgba(255,255,255,0.12);
  --btn-primary-hover-bg: var(--accent-600, var(--accent));
  --btn-primary-active-bg: var(--accent-600, var(--accent));
  --btn-primary-shadow: var(--shadow-sm);

  --btn-ghost-bg: rgba(255,255,255,0.06);
  --btn-ghost-fg: var(--text);
  --btn-ghost-border: var(--border);
  --btn-ghost-hover-bg: rgba(255,255,255,0.10);
  --btn-ghost-active-bg: rgba(255,255,255,0.12);
  --btn-ghost-shadow: none;

  --btn-radius: var(--radius-sm);

  /* Inputs / forms */
  --input-bg: var(--card);
  --input-fg: var(--text);
  --input-border: var(--border);
  --input-radius: var(--radius-sm);
  --input-focus-border: var(--accent);
  --input-focus-ring: var(--ring);
  --label-fg: var(--muted);
  --placeholder-fg: var(--muted);
  --placeholder-opacity: 0.70;

  /* Modals */
  --modal-overlay: var(--overlay);
  --modal-bg: var(--card);
  --modal-border: var(--border);
  --modal-radius: var(--radius);
  --modal-shadow: var(--shadow-lg);
  /* Keep existing code that uses --overlay working */
  --overlay: var(--modal-overlay);

  /* Mosaic / canvas (JS reads these) */
  --mosaic-empty-bg: var(--mosaic-grid);

  /* Viewer winners overlay defaults */
  --winner-popup-bg: rgba(0,0,0,0.55);
  --winner-popup-fg: #ffffff;
  --winner-popup-shadow: var(--shadow-lg);
  --winner-overlay-bg: rgba(0,0,0,0.55);
  --winner-banner-bg: rgba(0,0,0,0.55);
  --winner-banner-fg: #ffffff;
  --winner-img-radius: var(--radius);
  --winner-img-shadow: var(--shadow-lg);
}

/* ----------------------- Public UI scoping ----------------------- */
/* Buttons (upload, camera, crop modal, generic action buttons inside the public UI) */
.upload :is(button,.btnPrimary),
.gotoRowCol :is(button),
.cropActions :is(button),
.modalActions :is(button),
#cameraPanel :is(button){
  border-radius: var(--btn-radius) !important;
}

.upload button.primary,
.cropActions button.primary,
.modalBtn.primary{
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-fg) !important;
  border-color: var(--btn-primary-border) !important;
  box-shadow: var(--btn-primary-shadow) !important;
}

.upload button.primary:hover,
.cropActions button.primary:hover,
.modalBtn.primary:hover{
  background: var(--btn-primary-hover-bg) !important;
}

.upload button.primary:active,
.cropActions button.primary:active,
.modalBtn.primary:active{
  background: var(--btn-primary-active-bg) !important;
}

.upload button:not(.primary),
.cropActions button:not(.primary),
.modalBtn:not(.primary),
.gotoRowCol button{
  background: var(--btn-ghost-bg) !important;
  color: var(--btn-ghost-fg) !important;
  border-color: var(--btn-ghost-border) !important;
  box-shadow: var(--btn-ghost-shadow) !important;
}

.upload button:not(.primary):hover,
.cropActions button:not(.primary):hover,
.modalBtn:not(.primary):hover,
.gotoRowCol button:hover{
  background: var(--btn-ghost-hover-bg) !important;
}

.upload button:not(.primary):active,
.cropActions button:not(.primary):active,
.modalBtn:not(.primary):active,
.gotoRowCol button:active{
  background: var(--btn-ghost-active-bg) !important;
}

/* Inputs + selects (public) */
.upload :is(input[type="text"],input[type="number"],input[type="email"],textarea,select),
.gotoRowCol :is(input[type="text"],input[type="number"],select){
  background: var(--input-bg) !important;
  color: var(--input-fg) !important;
  border-color: var(--input-border) !important;
  border-radius: var(--input-radius) !important;
}

.upload label,
.gotoRowCol label,
.cropBody label,
.modalBody label{
  color: var(--label-fg);
}

.upload :is(input,textarea)::placeholder,
.gotoRowCol :is(input,textarea)::placeholder{
  color: var(--placeholder-fg) !important;
  opacity: var(--placeholder-opacity) !important;
}

/* Focus ring */
.upload :is(input,textarea,select):focus,
.gotoRowCol :is(input,textarea,select):focus{
  border-color: var(--input-focus-border) !important;
  box-shadow: var(--input-focus-ring) !important;
  outline: none !important;
}

/* Modals (public) */
.modalBackdrop{
  background: var(--modal-overlay) !important;
}

.modalShell,
.cropModal{
  background: var(--modal-bg) !important;
  border-color: var(--modal-border) !important;
  border-radius: var(--modal-radius) !important;
  box-shadow: var(--modal-shadow) !important;
}

/* ----------------------- Viewer overlays ----------------------- */
.winnerOverlay{
  background: var(--winner-overlay-bg) !important;
}

.winnerOverlayImg{
  border-radius: var(--winner-img-radius) !important;
  box-shadow: var(--winner-img-shadow) !important;
}

.winnerOverlayBanner{
  background: var(--winner-banner-bg) !important;
  color: var(--winner-banner-fg) !important;
}

/* Admin panel in viewer (only shown with key) — do not override its internal styles. */
.adminPanel :is(button,input,select,textarea){
  box-shadow: none !important;
}