:root {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: var(--font-ui, "Segoe UI", sans-serif);
  background: var(--color-bg, #eceff3);
  color: var(--color-text, #1f252b);
}

body {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(216,222,228,0.66));
}

button, input, select, textarea {
  font: inherit;
}

button {
  cursor: pointer;
  border: 1px solid var(--color-border, #ccd5dd);
  background: var(--color-bg-elevated, #fff);
  color: var(--color-text, #1f252b);
  border-radius: var(--radius-sm, 10px);
  padding: 10px 14px;
  transition: transform var(--anim-fast, 140ms) var(--ease-standard, ease), background var(--anim-fast, 140ms) var(--ease-standard, ease), border-color var(--anim-fast, 140ms) var(--ease-standard, ease);
}

button:hover {
  transform: translateY(-1px);
  border-color: var(--color-accent, #87cefa);
}

button.primary {
  background: var(--color-accent, #87cefa);
  border-color: var(--color-accent, #87cefa);
}

button.ghost {
  background: transparent;
}

button.danger {
  background: var(--color-danger, #d95858);
  border-color: var(--color-danger, #d95858);
  color: var(--color-text-inverse, #f8fbff);
}

button.success {
  background: var(--color-success, #4e8f65);
  border-color: var(--color-success, #4e8f65);
  color: var(--color-text-inverse, #f8fbff);
}

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--color-border, #ccd5dd);
  background: var(--color-bg-elevated, #fff);
  color: var(--color-text, #1f252b);
}

.hidden {
  display: none !important;
}