:root {
  --bg: #f7fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #6b7280;
  --accent: #059669;
  --primary: #2563eb;
  --primary-600: #1d4ed8;
  --danger: #ef4444;

  --primary-rgb: 37, 99, 235;
  --danger-rgb: 239, 68, 68;
  --border: rgba(2, 6, 23, 0.22);
  --border-weak: rgba(2, 6, 23, 0.12);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
}
.btn-primary {
  background: linear-gradient(180deg, var(--primary), var(--primary-600));
  color: var(--surface);
  font-weight: 700;
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--primary-600) 85%, black 15%);
}
.btn-danger {
  background: var(--danger);
  color: var(--surface);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
}
.dropdown,
.custom-select .options {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
.dropdown-option {
  color: var(--text);
}
.dropdown-option.disabled {
  color: var(--muted);
}

.dropdown-option:not(.disabled) {
  cursor: pointer;
  transition:
    background-color 120ms ease,
    color 120ms ease;
}
.dropdown-option:not(.disabled):hover,
.dropdown-option.active:not(.disabled) {
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary-600);
}
.dropdown-option.active:not(.disabled) {
  outline: none;
}
.routine-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: visible;
}
.routine-table th,
.routine-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.routine-table th {
  background: var(--bg);
}
.text-muted {
  color: var(--muted);
}
.accent {
  color: var(--accent);
}
#site-footer {
  background: transparent;
  color: var(--muted);
}
#site-footer a {
  color: var(--primary);
}
@media (max-width: 640px) {
  input,
  button,
  select {
    font-size: 16px;
    height: 44px;
  }
}
