/**
 * Shared Sunlit palette for Dojo game/training pages (opt-in: body.dojo-internal-app).
 * Dark (Night) uses each page’s existing :root tokens when html[data-theme] is unset.
 */

.dojo-internal-chrome {
  position: fixed;
  top: env(safe-area-inset-top, 0);
  right: env(safe-area-inset-right, 0);
  z-index: 99990;
  padding: 10px 12px;
  pointer-events: auto;
}

.dojo-internal-chrome .jg-theme-switch {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

html[data-theme="sunlit"] body.dojo-internal-app {
  --bg: #f4f1ea;
  --panel: rgba(255, 252, 247, 0.95);
  --blue: #1b6fa8;
  --cyan: #0e7490;
  --green: #0d8060;
  --gold: #9a7224;
  --orange: #c2410c;
  --red: #b91c1c;
  --border: rgba(27, 111, 168, 0.22);
  color: #121a22;
  color-scheme: light;
}

html[data-theme="sunlit"] body.dojo-internal-app {
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(circle at 20% 0%, rgba(27, 111, 168, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(13, 128, 96, 0.1) 0%, transparent 45%),
    linear-gradient(180deg, #faf7f2 0%, var(--bg) 100%) !important;
}

/* Common HUD / chrome that assumes white text */
html[data-theme="sunlit"] body.dojo-internal-app .hud,
html[data-theme="sunlit"] body.dojo-internal-app .logo,
html[data-theme="sunlit"] body.dojo-internal-app header .logo {
  color: var(--green);
}

html[data-theme="sunlit"] body.dojo-internal-app .hint-text {
  color: #64748b !important;
}

html[data-theme="sunlit"] body.dojo-internal-app .protocol-briefing {
  background: rgba(27, 111, 168, 0.08) !important;
  border-color: var(--border) !important;
  color: var(--blue) !important;
}

html[data-theme="sunlit"] body.dojo-internal-app .briefing-close {
  color: #334155 !important;
}

html[data-theme="sunlit"] body.dojo-internal-app .btn-hub {
  border-color: var(--border) !important;
  color: #475569 !important;
}

html[data-theme="sunlit"] body.dojo-internal-app .btn-hub:hover {
  color: var(--blue) !important;
  border-color: var(--blue) !important;
}

html[data-theme="sunlit"] body.dojo-internal-app .btn-action-nav,
html[data-theme="sunlit"] body.dojo-internal-app .btn-start,
html[data-theme="sunlit"] body.dojo-internal-app .btn-challenge {
  color: var(--green) !important;
  border-color: var(--green) !important;
}

html[data-theme="sunlit"] body.dojo-internal-app .btn-green {
  background: var(--green) !important;
  color: #fff !important;
}

html[data-theme="sunlit"] body.dojo-internal-app #feedback {
  color: var(--green) !important;
  text-shadow: none !important;
}