:root,
html[data-color-scheme="dark"],
html[data-color-scheme="light"],
html.color-scheme-dark,
html.color-scheme-light {
  color-scheme: light;
  --bg: #f3f3f4;
  --panel: #ffffff;
  --surface: #ffffff;
  --field: #ffffff;
  --mist: #f7f7f8;
  --cream-soft: #f0f0f2;
  --sidebar: #ffffff;
  --sidebar-text: #3d3d42;
  --text: #121212;
  --ink: #121212;
  --muted: #6a6a6e;
  --border: rgba(18, 18, 18, 0.08);
  --soft-press: rgba(18, 18, 18, 0.06);
  --shadow: 0 1px 2px rgba(18, 18, 18, 0.06);
  --shadow-lift: 0 16px 40px rgba(18, 18, 18, 0.08);
  --tumicha-btn-border: var(--border);
}

html,
html[data-color-scheme="dark"],
html.color-scheme-dark,
html body {
  background: var(--bg);
  color: var(--text);
  color-scheme: light;
}

.muted,
.muted-text,
.muted-line,
.settings-intro,
.auth-helper {
  color: var(--muted);
}

html input,
html textarea,
html select,
html[data-color-scheme="dark"] input,
html[data-color-scheme="dark"] textarea,
html[data-color-scheme="dark"] select,
html.color-scheme-dark input,
html.color-scheme-dark textarea,
html.color-scheme-dark select {
  color-scheme: light;
}

html :is(input, textarea)::placeholder,
html[data-color-scheme="dark"] :is(input, textarea)::placeholder,
html.color-scheme-dark :is(input, textarea)::placeholder {
  color: var(--muted);
  opacity: 0.72;
}

html :is(input, textarea, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="color"]) {
  background-color: var(--field);
  color: var(--ink);
  border-color: var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

html :is(input, textarea, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="color"]):focus {
  background-color: var(--field);
  border-color: rgba(18, 18, 18, 0.16);
  box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.06);
}

.settings-card,
.account-card,
.login-card,
.auth-card,
.modal {
  border-color: var(--border);
  background: var(--panel);
}

html .banner-shop-search-field input,
html .banner-shop-search-field input:focus {
  background-color: rgba(245, 245, 246, 0.08);
  color: #f5f5f6;
  border-color: transparent;
  box-shadow: none;
}