:root {
  --btn-radius: 10px;
  --btn-font-size: 14px;
  --btn-font-weight: 600;
  --btn-min-height: 38px;
  --btn-padding-y: 0.5rem;
  --btn-padding-x: 0.95rem;
  --btn-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
  --btn-shadow-hover: 0 4px 10px rgba(15, 23, 42, 0.16);
  --btn-ring: 0 0 0 3px rgba(59, 130, 246, 0.2);
  --btn-border: 1px solid transparent;
  --gelato-blue: #7fb3ff;
  --gelato-blue-hover: #6fa7fb;
  --gelato-blue-border: #5e97ea;
  --gelato-blue-soft: #eaf3ff;
}

/* Non-breaking baseline: only interaction polish for native controls */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a[role="button"] {
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease,
    box-shadow 180ms ease, transform 120ms ease;
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
a[role="button"]:active {
  transform: translateY(1px);
}

/* Unified button system (opt-in): use class="btn ..." */
.btn,
.button {
  border-radius: var(--btn-radius) !important;
  min-height: var(--btn-min-height);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font-size) !important;
  font-weight: var(--btn-font-weight) !important;
  line-height: 1.2;
  letter-spacing: 0.01em;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease,
    box-shadow 180ms ease, transform 120ms ease;
  box-shadow: var(--btn-shadow);
  border: var(--btn-border);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.btn:hover,
.button:hover {
  box-shadow: var(--btn-shadow-hover);
  filter: saturate(1.05);
}

button:active,
.btn:active,
.button:active {
  transform: translateY(1px);
}

.btn:focus-visible,
.button:focus-visible {
  outline: none;
  box-shadow: var(--btn-ring), var(--btn-shadow-hover);
}

.btn:disabled,
.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.btn svg,
.button svg {
  flex-shrink: 0;
}

/* Keep tiny icon-only controls compact */
button[class*="w-6"][class*="h-6"],
button[class*="w-8"][class*="h-8"],
button[class*="w-10"][class*="h-10"] {
  min-height: 0;
  padding: 0 !important;
}

.btn-primary {
  background: var(--gelato-blue) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn-primary:hover {
  background: var(--gelato-blue-hover) !important;
}

.btn-secondary {
  background: #334155 !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn-secondary:hover {
  background: #475569 !important;
}

.btn-danger {
  background: #ef4444 !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn-danger:hover {
  background: #dc2626 !important;
}

.btn-outline {
  background: #fff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

.btn-outline:hover {
  background: #f8fafc !important;
}

/* Unified back navigation action: transparent arrow + text */
.back-nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #475569 !important;
  padding: 0.4rem 0.5rem !important;
  min-height: 0 !important;
  font-weight: 600;
}

.back-nav-btn:hover {
  background: rgba(148, 163, 184, 0.12) !important;
  color: #334155 !important;
  box-shadow: none !important;
}

/* Borderless inline actions for table links/icons */
.btn-ghost {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
  padding: 0.1rem 0.25rem !important;
}

.btn-ghost:hover {
  background: transparent !important;
  box-shadow: none !important;
}

/* Replace harsh green actions with softer gelato blue */
button[class*="bg-green-"],
button[class*="bg-emerald-"],
button[class*="bg-teal-"],
a[class*="bg-green-"],
a[class*="bg-emerald-"],
a[class*="bg-teal-"] {
  background: var(--gelato-blue) !important;
  border-color: transparent !important;
  color: #fff !important;
}

button[class*="bg-green-"]:hover,
button[class*="bg-emerald-"]:hover,
button[class*="bg-teal-"]:hover,
a[class*="bg-green-"]:hover,
a[class*="bg-emerald-"]:hover,
a[class*="bg-teal-"]:hover {
  background: var(--gelato-blue-hover) !important;
}

/* Sky-gelato tone for existing strong blue buttons as well */
button[class*="bg-blue-"],
button[class*="bg-indigo-"],
button[class*="bg-violet-"],
a[class*="bg-blue-"],
a[class*="bg-indigo-"],
a[class*="bg-violet-"] {
  background: var(--gelato-blue) !important;
  border-color: transparent !important;
  color: #fff !important;
}

button[class*="bg-blue-"]:hover,
button[class*="bg-indigo-"]:hover,
button[class*="bg-violet-"]:hover,
a[class*="bg-blue-"]:hover,
a[class*="bg-indigo-"]:hover,
a[class*="bg-violet-"]:hover {
  background: var(--gelato-blue-hover) !important;
}