@import url("/assets/css/base/tokens.css");

/* ===============================
   Buttons (component)
   =============================== */
.btn-demo {
  --p: 12px 20px;
  padding: var(--p);
  border-radius: 999px;
  text-decoration: none;
  background: var(--btn);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 30px rgba(34, 198, 255, 0.35), 0 0 0 0 var(--ring);
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.25s ease;
}
.btn-demo:hover {
  background: var(--btn-hover);
  transform: translateY(-1px);
  box-shadow: 0 16px 38px rgba(34, 198, 255, 0.45), 0 0 0 10px var(--ring);
}

.btn-primary {
  display: inline-block;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--btn);
  color: var(--ink);
  font-weight: 800;
  box-shadow: 0 14px 44px rgba(37, 196, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.25s ease;
}
.btn-primary:hover {
  background: var(--btn-hover);
  transform: translateY(-2px);
  box-shadow: 0 20px 54px rgba(37, 196, 255, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}