/* Neutral “medium” theme — between light and dark (not white, not black) */

[data-theme="dim"] {
  --bg: #4a4a4e;
  --bg-subtle: #424246;
  --surface: #56565a;
  --surface-muted: #4e4e52;
  --text: #ececf0;
  --text-muted: #b4b4bc;
  --border: #6e6e74;
  --border-subtle: #5c5c62;
  --accent: #9a8ec8;
  --accent-hover: #b0a4dc;
  --accent-muted: #c4b8e8;
  --accent-pop: #e8c87a;
  --accent-pop-hover: #d4b060;
  --focus: #9a8ec8;
  --orange: #e8b070;
  --orange-hover: #d49a58;
  --success: #8aab8e;
  --danger: #e87868;
  --locked: #8a8a92;
  --locked-text: #aeaeb6;
  --on-accent: #1e1e22;
  --glow-warm: color-mix(in srgb, #9a8ec8 14%, transparent);
  --glow-cool: color-mix(in srgb, #6a6a70 12%, transparent);
}

[data-theme="dim"][data-mood="plum"] {
  --accent: #8b7ab8;
  --accent-hover: #a090d0;
  --accent-pop: #e9f056;
}

[data-theme="dim"][data-mood="mocha"] {
  --accent: #b8907a;
  --accent-hover: #c8a088;
  --accent-pop: #6a9a7a;
}

[data-theme="dim"][data-mood="cloud"] {
  --accent: #b8a8a0;
  --accent-hover: #c8b8b0;
  --accent-pop: #8ab0d8;
}

/* Primary buttons — restore accent gradient */

.btn-primary {
  background: linear-gradient(
    135deg,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent) 72%, var(--accent-pop, var(--accent))) 100%
  );
  color: var(--on-accent, #042f2e);
  border: 1px solid color-mix(in srgb, var(--accent-pop, var(--accent)) 45%, var(--accent));
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--accent-pop, var(--accent)) 35%, transparent),
    0 8px 22px -8px color-mix(in srgb, var(--accent) 42%, transparent);
}

.btn-primary:hover {
  background: linear-gradient(
    135deg,
    var(--accent-hover) 0%,
    color-mix(in srgb, var(--accent-hover) 65%, var(--accent-pop-hover, var(--accent-hover))) 100%
  );
  border-color: var(--accent-pop, var(--accent-hover));
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--accent-pop, var(--accent)) 45%, transparent),
    0 10px 26px -8px color-mix(in srgb, var(--accent) 48%, transparent);
}

[data-theme="light"] .btn-primary {
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--accent-pop, var(--accent)) 18%, transparent),
    0 6px 18px -8px color-mix(in srgb, var(--accent) 28%, transparent);
}

[data-theme="dim"] .btn-primary {
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--accent-pop, var(--accent)) 22%, transparent),
    0 8px 20px -10px color-mix(in srgb, var(--accent) 36%, transparent);
}