:root {
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: rgba(0, 0, 0, 0.6);
  --color-input-background: #ffffff;
  --color-input-text: inherit;
  --color-input-border: rgba(0, 0, 0, 0.23);
  --color-input-border-focus: #0c84e4;
  --color-placeholder: rgba(0, 0, 0, 0.6);
  --color-select-icon: rgba(0, 0, 0, 0.6);
}

html[data-theme='light'] {
  color-scheme: light;
}

html[data-theme='dark'] {
  color-scheme: dark;
  --color-background: #14181d;
  --color-surface: #313b47;
  --color-text-primary: #ddd;
  --color-text-secondary: rgba(221, 221, 221, 0.7);
  --color-input-background: #1f2833;
  --color-input-text: #ddd;
  --color-input-border: #44515f;
  --color-placeholder: rgba(221, 221, 221, 0.7);
  --color-select-icon: #ddd;
}

html[data-theme] body {
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

html[data-theme] h4,
html[data-theme] legend,
html[data-theme] .MuiTypography-root {
  color: var(--color-text-primary);
}

html[data-theme='dark'] .invert-color {
  filter: invert(100%);
}

html[data-theme] .MuiFormLabel-root,
html[data-theme] .MuiFormHelperText-root {
  color: var(--color-text-secondary);
}

html[data-theme] .MuiOutlinedInput-root,
html[data-theme] .MuiInputBase-root,
html[data-theme] textarea,
html[data-theme] input {
  background-color: var(--color-input-background);
  color: var(--color-input-text);
}

html[data-theme] .MuiOutlinedInput-notchedOutline {
  border-color: var(--color-input-border);
}

html[data-theme] .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--color-input-border-focus);
}

html[data-theme] .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline {
  border-color: #d32f2f;
}

html[data-theme] ::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
}

html[data-theme] .MuiSelect-icon {
  color: var(--color-select-icon);
}

html[data-theme] .MuiMenu-paper,
html[data-theme] .MuiMenuItem-root {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
}
