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

[data-theme="dim"] {
  --bg: #6a6762;
  --bg-subtle: #5f5c57;
  --surface: #78746e;
  --surface-muted: #6f6b65;
  --text: #f4f1ea;
  --text-muted: #d4cfc6;
  --border: #8a857e;
  --border-subtle: #7a756e;
  --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, #c4b8a8 22%, transparent);
  --glow-cool: color-mix(in srgb, #8a8680 16%, 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"] {
  --bg: #6e6a64;
  --bg-subtle: #635f5a;
  --surface: #7c776f;
  --surface-muted: #726e68;
  --text: #f6f3ec;
  --text-muted: #ddd6cc;
  --border: #8f8a82;
  --border-subtle: #7e7972;
  --accent: #c0c06c;
  --accent-hover: #d4d488;
  --accent-muted: #d8d8a0;
  --accent-pop: #9bb0c8;
  --focus: #c0c06c;
  --on-accent: #2a2a24;
  --glow-warm: color-mix(in srgb, #c0c06c 24%, transparent);
  --glow-cool: color-mix(in srgb, #9bb0c8 14%, transparent);
}

/* 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);
}