/* Ding's original bell green is the identity color in every theme.
   Darker green is reserved for readable text on light surfaces. */
:root,
[data-md-color-scheme] {
  color-scheme: light dark;
  --ding-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ding-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ding-green: #7ee787;
  --ding-action: var(--ding-green);
  --ding-on-brand: #17251c;
  --ding-logo-surface: #f7f6f2;
  --ding-action-hover: color-mix(in srgb, var(--ding-action), #17251c 8%);
  --ding-overlay: #07120db3;
  --ding-shadow-nav: 0 1px 3px #00000009;
  --ding-shadow-popover: 0 6px 28px #0002;
  --ding-shadow-dialog: 0 24px 90px #0003;
  --ding-bg: light-dark(#f7f6f2, #171c19);
  --ding-surface: light-dark(#ffffff, #202722);
  --ding-subtle: light-dark(#eeeee7, #29312b);
  --ding-rail: light-dark(#eeeee7, #121713);
  --ding-text: light-dark(#222b25, #f0f1e9);
  --ding-muted: light-dark(#62695f, #acb6ab);
  --ding-border: light-dark(#d9ddd2, #3b473c);
  --ding-brand: light-dark(#246239, #7ee787);
  --ding-brand-soft: light-dark(#e3f3df, #2a3c2c);
  --ding-violet: light-dark(#68538b, #c2addf);
  --ding-violet-soft: light-dark(#ece5f3, #332c40);
  --ding-incident: light-dark(#a33c33, #f0a398);
  --ding-incident-soft: light-dark(#f9eae7, #3d2826);
  --ding-success-soft: var(--ding-brand-soft);
  --ding-success: light-dark(#246239, #a2e4a3);
  --ding-attention: light-dark(#80530f, #ebbc74);
  --ding-attention-soft: light-dark(#fbf1dd, #362d1e);
  --ding-unknown: var(--ding-violet);
  --ding-unknown-soft: var(--ding-violet-soft);
  --ding-paused: var(--ding-muted);
  --ding-focus: var(--ding-brand);
  --ding-code-key: var(--ding-violet);
  --ding-code-value: var(--ding-brand);
  --ding-code-number: var(--ding-attention);
  --ding-code-comment: var(--ding-muted);
  --ding-selection: var(--ding-violet-soft);
  --ding-radius: 10px;
  --ding-radius-control: 6px;
  --ding-radius-panel: 12px;
  --ding-space: 4px;
}
:root[data-theme="light"],
[data-md-color-scheme="default"] {
  color-scheme: light;
}
:root[data-theme="dark"],
[data-md-color-scheme="slate"] {
  color-scheme: dark;
}

::selection {
  background: var(--ding-selection);
  color: var(--ding-text);
}
input,
select,
textarea {
  accent-color: var(--ding-brand);
}