/*
 * Developer mode intentionally uses the same visual language as the rest of
 * Stone Memory. The developer area changes the content, not the card system.
 */

body.stone-theme-enabled .developer-mode-head {
  color: var(--stone-theme-ink);
  background: linear-gradient(132deg, var(--stone-theme-surface), var(--stone-theme-surface-soft) 58%, var(--stone-theme-accent-soft));
  border-color: var(--stone-theme-line);
  box-shadow: var(--stone-theme-shadow-panel);
}

body.stone-theme-enabled .developer-mode-head h1,
body.stone-theme-enabled .developer-mode-head .eyebrow,
body.stone-theme-enabled .developer-mode-head .lead {
  color: inherit;
}

body.stone-theme-enabled .developer-mode-head .eyebrow {
  color: var(--stone-theme-accent-strong);
}

body.stone-theme-enabled .developer-mode-head .lead {
  color: var(--stone-theme-ink-soft);
}

body.stone-theme-enabled .developer-orbit {
  border-color: var(--stone-theme-line);
}

body.stone-theme-enabled .developer-orbit::before {
  border-color: var(--stone-theme-line-soft);
}

body.stone-theme-enabled .developer-orbit::after {
  background: var(--stone-theme-accent-soft);
  box-shadow: 0 0 24px var(--stone-theme-accent-soft);
}

body.stone-theme-enabled .developer-orbit span,
body.stone-theme-enabled .developer-orbit i {
  background: var(--stone-theme-status);
  box-shadow: 0 0 12px var(--stone-theme-accent-soft);
}

body.stone-theme-enabled .developer-orbit i {
  background: var(--stone-theme-danger);
}

body.stone-theme-enabled .developer-experiment-card,
body.stone-theme-enabled .developer-theme-card {
  color: var(--stone-theme-ink);
  border-color: color-mix(in srgb, var(--stone-theme-accent) 32%, var(--stone-theme-line));
  background:
    radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--stone-theme-accent) 18%, transparent), transparent 35%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--stone-theme-surface) 92%, var(--stone-theme-accent-soft)),
      color-mix(in srgb, var(--stone-theme-surface-soft) 66%, var(--stone-theme-accent-soft)) 58%,
      color-mix(in srgb, var(--stone-theme-accent-soft) 62%, var(--stone-theme-surface)));
  box-shadow: var(--stone-theme-shadow-card);
}

body.stone-theme-enabled .developer-experiment-card::before {
  display: block;
  background-image: radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--stone-theme-accent) 18%, transparent) 0 1px, transparent 1.5px);
}

body.stone-theme-enabled .developer-experiment-glow {
  display: block;
  background: radial-gradient(circle, color-mix(in srgb, var(--stone-theme-calendar-bloom) 26%, transparent), transparent 65%);
}

body.stone-theme-enabled .plugin-card .plugin-card-status {
  background: transparent;
}

body.stone-theme-enabled .plugin-card .plugin-card-icon {
  color: var(--stone-theme-accent-strong);
  background: var(--stone-theme-surface-soft);
  border-color: var(--stone-theme-line);
}

body.stone-theme-enabled .plugin-card .plugin-card-icon svg {
  fill: none;
}

body.stone-theme-enabled .plugin-card .plugin-card-status .developer-enter {
  justify-content: center;
}

body.stone-theme-enabled .developer-experiment-copy .eyebrow {
  color: var(--stone-theme-accent-strong);
}

body.stone-theme-enabled .developer-experiment-copy h2,
body.stone-theme-enabled .developer-theme-card h2 {
  color: var(--stone-theme-ink);
}

body.stone-theme-enabled .developer-experiment-copy > p:not(.eyebrow),
body.stone-theme-enabled .developer-theme-card .developer-experiment-copy > p:not(.eyebrow) {
  color: var(--stone-theme-ink-soft);
}

body.stone-theme-enabled .developer-status {
  color: var(--stone-theme-accent-strong);
  background: var(--stone-theme-accent-soft);
  border: 1px solid var(--stone-theme-line);
}

body.stone-theme-enabled .developer-contributor {
  color: var(--stone-theme-ink-soft);
  background: var(--stone-theme-surface);
  border-color: var(--stone-theme-line);
}

body.stone-theme-enabled .developer-experiment-features span {
  color: var(--stone-theme-ink-soft);
  background: var(--stone-theme-surface);
  border-color: var(--stone-theme-line-soft);
}

body.stone-theme-enabled .developer-memory-stack i,
body.stone-theme-enabled .developer-theme-preview i {
  border-color: var(--stone-theme-line);
  background: var(--stone-theme-surface);
  box-shadow: var(--stone-theme-shadow-card);
}

body.stone-theme-enabled .developer-memory-stack i:nth-child(3),
body.stone-theme-enabled .developer-theme-preview i:nth-child(3) {
  background: var(--stone-theme-accent-soft);
}

body.stone-theme-enabled .developer-memory-stack b,
body.stone-theme-enabled .developer-theme-preview b {
  color: var(--stone-theme-accent-strong);
}

body.stone-theme-enabled .developer-enter {
  color: var(--stone-theme-ink);
  background:
    linear-gradient(
      135deg,
      var(--stone-theme-accent-soft),
      color-mix(in srgb, var(--stone-theme-accent) 48%, var(--stone-theme-surface))
    );
  border-color: color-mix(in srgb, var(--stone-theme-accent) 58%, var(--stone-theme-line));
  box-shadow: var(--stone-theme-shadow-button);
}

body.stone-theme-enabled .developer-enter:hover {
  color: var(--stone-theme-ink);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--stone-theme-accent-soft) 76%, var(--stone-theme-surface)),
      color-mix(in srgb, var(--stone-theme-accent) 62%, var(--stone-theme-surface))
    );
  border-color: var(--stone-theme-accent);
}

body.stone-theme-enabled .theme-workbench {
  color: var(--stone-theme-ink);
  border-color: var(--stone-theme-line-soft);
  background: var(--stone-theme-surface);
  box-shadow: var(--stone-theme-shadow-card);
}

body.stone-theme-enabled .theme-workbench h2,
body.stone-theme-enabled .theme-workbench .theme-token-field,
body.stone-theme-enabled .theme-workbench .theme-token-group > summary {
  color: var(--stone-theme-ink);
}

body.stone-theme-enabled .theme-workbench-head p:last-child,
body.stone-theme-enabled .theme-workbench .theme-token-group > summary small,
body.stone-theme-enabled .theme-workbench #theme-status {
  color: var(--stone-theme-ink-soft);
}

body.stone-theme-enabled .theme-workbench .theme-file-badge {
  color: var(--stone-theme-accent-strong);
  border-color: var(--stone-theme-line);
  background: var(--stone-theme-accent-soft);
}

body.stone-theme-enabled .theme-workbench .theme-token-group,
body.stone-theme-enabled .theme-workbench .theme-token-group:last-child {
  border-color: var(--stone-theme-line-soft);
}

body.stone-theme-enabled .theme-workbench .theme-token-field > input,
body.stone-theme-enabled .theme-workbench .theme-token-control input {
  color: var(--stone-theme-ink);
  border-color: var(--stone-theme-line);
  background: var(--stone-theme-surface);
}

body.stone-theme-enabled .theme-workbench .theme-token-field > input:focus,
body.stone-theme-enabled .theme-workbench .theme-token-control input:focus {
  border-color: var(--stone-theme-accent);
  box-shadow: 0 0 0 3px var(--stone-theme-accent-soft);
}

body.stone-theme-enabled .theme-workbench .theme-upload {
  color: var(--stone-theme-accent-strong);
  border-color: var(--stone-theme-line);
  background: var(--stone-theme-accent-soft);
}

body.stone-theme-enabled .theme-workbench #theme-status.error {
  color: var(--stone-theme-danger);
}

body.stone-theme-enabled .theme-workbench .ghost {
  color: var(--stone-theme-accent);
}